react 10之状态管理工具2 redux + react-redux +redux-saga

react 10之状态管理工具2 redux +

• npm install redux react-redux

• npm i redux-saga

• redux-saga

  • redux-saga是一个Redux的中间件，它允许你在Redux中编写异步的action creators。

store / index.js 入口文件

import { applyMiddleware, legacy_createStore } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from "./rootReducer";
import rootSaga from "./rootSaga";const sagaMiddleware = createSagaMiddleware();const store = legacy_createStore(rootReducer, applyMiddleware(sagaMiddleware));sagaMiddleware.run(rootSaga);export default store;

actionType.js actions常量的文件

// actionType.js 常量 唯一标识 标记当前action的唯一性
export const FORM_ADD_COUNT = 'form_addCount'
export const FORM_SUB_COUNT = 'form_subCount'
export const LIST_CHANGE_IsSHOW = 'list_change_isShow'export const TEST_CHANGE_ARR = 'test_change_arr'

rootReducer.js 总的reducer 用于聚合所有模块的 reducer

// rootReducer.js 总的reducer 用于聚合所有模块的 reducer
import { combineReducers } from 'redux';
import formReducer from './form/formReducer';
import listReducer from './list/listReducer';
import testReducer from './test/testReducer';const rootReducer = combineReducers({list: listReducer,form: formReducer,test: testReducer
});export default rootReducer;

rootSaga.js 总的saga 用于聚合所有模块的 saga

// rootSaga.js 总的saga 用于聚合所有模块的 saga
import { all } from 'redux-saga/effects';
import watchListActions from './list/listSaga';function* rootSaga() {yield all([watchListActions()]);
}export default rootSaga;

store / form / formActions.js 同步修改 isShow

// formActions.js
import { LIST_CHANGE_IsSHOW } from "../actionType";
export const list_changeShow = () => ({type: LIST_CHANGE_IsSHOW,
});

store / form / formReducer.js 同步修改 isShow

// formReducer.js
import { LIST_CHANGE_IsSHOW } from "../actionType";
const initialState = {isShow: false
};const formReducer = (state = initialState, action) => {switch (action.type) {case LIST_CHANGE_IsSHOW:return { ...state, isShow: !state.isShow };default:return state;}
};export default formReducer;

store / list / listActions.js 同步与异步修改 count、arr

// listActions.js
import { FORM_ADD_COUNT, FORM_SUB_COUNT } from "../actionType";
export const form_addCount = () => ({type: FORM_ADD_COUNT
});export const form_subCount = () => ({type: FORM_SUB_COUNT
});

store / list / listReducer.js 同步与异步修改 count、arr

// listReducer.js
import { FORM_ADD_COUNT, FORM_SUB_COUNT } from "../actionType";
const initialState = {count: 0
};const listReducer = (state = initialState, action) => {switch (action.type) {case FORM_ADD_COUNT:return { ...state, count: state.count + 1 };case FORM_SUB_COUNT:return { ...state, count: state.count - 1 };default:return state;}
};export default listReducer;

store / list / listSaga.js 同步与异步修改 count、arr ( 获取最新的count和arr )

// listSaga.js
import { delay, put, select, takeEvery } from 'redux-saga/effects';
import { FORM_ADD_COUNT, FORM_SUB_COUNT, TEST_CHANGE_ARR } from "../actionType";function* form_addCountAsync() {// 异步操作，例如发送网络请求等yield console.log('add count...',)// const currentCount = yield select((state) => state.list.count);// console.log('currentCount',currentCount); // 获取到count最新的值 可以用于发起异步请求啥的yield delay(2000); // 延迟2s后 再触发 TEST_CHANGE_ARRlet currentArrLength = yield select((state) => state.test.arr)currentArrLength = currentArrLength?.length  + 1console.log('currentArrLength',currentArrLength);yield put({ type: TEST_CHANGE_ARR ,payload:'我是-' + currentArrLength}); // 修改test模块的 arr数据
}function* form_subCountAsync() {// 异步操作，例如发送网络请求等yield console.log('sub count...');
}function* watchListActions() {yield takeEvery(FORM_ADD_COUNT, form_addCountAsync);yield takeEvery(FORM_SUB_COUNT, form_subCountAsync);
}export default watchListActions;

store / test / testActions.js 被add的异步修改了数据

// testActions.js
import { TEST_CHANGE_ARR } from "../actionType";
export const test_change_arr = () => ({type: TEST_CHANGE_ARR,
});

store / test / testReducer.js 被add的异步修改了数据

// testReducer.js
import { TEST_CHANGE_ARR } from "../actionType";
const initialState = {arr: []
};const testReducer = (state = initialState, action) => {console.log('action',action);switch (action.type) {case TEST_CHANGE_ARR:return { ...state, arr: [...state.arr,action.payload] };default:return state;}
};export default testReducer;

index.js 项目入口文件引入

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import App from "./7redux/3使用saga/app";
import store from "./store/index.js";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Provider store={store}><App /></Provider>
);

7redux/3使用saga/app.jsx

import React from 'react';
import { connect } from 'react-redux';
import { list_changeShow } from '../../store/form/formActions';
import { form_addCount, form_subCount } from '../../store/list/listActions';class App extends React.Component {render() {// console.log('this.props',this.props);const { count, isShow, form_subCount, form_addCount, list_changeShow,arr } = this.props;return (<div><p>Count: {count}</p><button onClick={form_addCount}>addcount</button><button onClick={form_subCount}>Decrement</button><p>isShow: {isShow ? 'True' : 'False'}</p><button onClick={list_changeShow}>Toggle Show</button><p>arr: {arr}</p></div>);}
}const mapStateToProps = (state) => ({count: state.list.count,isShow: state.form.isShow,arr: state.test.arr,
});const mapDispatchToProps = {form_addCount,form_subCount,list_changeShow
};export default connect(mapStateToProps, mapDispatchToProps)(App);

效果