npm install --save reduxnpm install --save redux-saga

export const TEST1_ACTION = 'test1';export const SET_TEST2_ACTION = 'change_test2';export const SET_TEST3_ACTION = 'change_test3';

import {TEST1_ACTION, SET_TEST2_ACTION, SET_TEST3_ACTION} from './types// 獲取test1的值export const getTest1Action = () => {  return {    type:TEST1_ACTION  }}// 寫入test2的值export const setTest2Action = (testValue) => {  return {    type:SET_TEST2_ACTION,    payload:testValue  }}// 寫入test3的值export const setTest3Action = (payload) => {  return {    type:SET_TEST3_ACTION,    payload  }}

import {TEST1_ACTION, SET_TEST2_ACTION, SET_TEST3_ACTION} from '../actions/types// 初始化const initTest = {  test1:'這是test1初始化的值',  test2:'這是test2初始化的值',  test3:'這是test3初始化的值'}export default (state = initTest, action) =>{  switch (action.type) {    case TEST1_ACTION:{      return {        ...state      }    }    case SET_TEST2_ACTION:{      return {        ...state,        test2:action.payload      }    }    case SET_TEST3_ACTION:{      return {        ...state,        test3:action.payload.testValue      }    }    default:    return state  }}

import {combineReducers} from 'redux'import test from './test'const reducers = combineReducers({  test,  /*  還可以繼續加入其它的reducer文件，比如：  settings,  auth,  */});export default reducers;

import {all,fork,put,takeEvery} from 'redux-saga/effects'import {setTest2Action, setTest3Action} from "../actions/test"import {SET_TEST2_ACTION, SET_TEST3_ACTION} from "../actions/actionTypes"import axios from 'axios'function* changeTest2 (testValue) {  yield put(setTest2Action(testValue))}function* changeTest3 (obj) {  try{    // 這里使用axios從網絡獲取數據演示，沒有安裝axios的需要先安裝它。    // 期間響應狀態碼判斷就省略了，就當它每次請求都成功獲得testValue的數據    response = axios.get('http://localhost/api/test')        // 假設response.data里面有一個key為testValue的值    yield put(setTest3Action(response.data))  } catch (error) {    console.error('這里也可以yield put一個createAction，這里不作演示')  }}export function* setTest2 () {  yield takeEvery(SET_TEST2_ACTION, changeTest2)}export function* setTest3 () {  yield takeEvery(SET_TEST3_ACTION, changeTest3)}export default function* testSaga(){  yield all([    fork(setTest2),    fork(setTest3),  ])}

import {all} from 'redux-saga/effects';import testSaga from './test'export default function* rootSaga() {  yield all([    testSaga()  ]);}

import {applyMiddleware, compose, createStore} from 'redux';import reducers from '../reducers/index';import createSagaMiddleware from 'redux-saga';import rootSaga from '../sagas/index';const sagaMiddleware = createSagaMiddleware();// 使用數組是為了方便以后繼續添加中間件const middlewares = [sagaMiddleware];const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;const store = createStore( reducers, composeEnhancers(applyMiddleware(...middlewares)));sagaMiddleware.run(rootSaga);export default store;

import React from 'react'import {Provider} from 'react-redux'import store from './store'import Test from './Test/'import {BrowserRouter, Route, Switch} from "react-router-dom"const MainApp = () => <Provider store={store}>  <BrowserRouter>   <Switch>    <Route path="/" component={Test}/>   </Switch>  </BrowserRouter> </Provider>;export default MainApp

import React from 'react'import {connect} from 'react-redux'import {setTest2Action, setTest3Action} from '../actions/test'class Test extends React.Component {  render() {    const {test1, test2, test3, setTest2Action, setTest3Action} = this.props    return {      <div>        <div>          test1的值為：{test1}        </div>        <div>          test2的值為：{test2}          <button onClick={setTest2Action('abc')}>設置test2的值為 abc</button>        </div>        <div>          test3的值為：{test3}          <button onClick={setTest3Action()}>從網絡獲取test3的值</button>        </div>      </div>    }  }}const mapStateToProps = ({test}) => {  const {test1,test2,test3} = test;  return {test1,test2,test3}}export default connect (mapStateToProps,{setTest2Action, setTest3Action})(Test)