1.前言
这篇文章我们在项目中使用下
state也可以按需拆分
这节我们主要拆分reducer
let onlyState = { counter: 0, page404: {}, address: {}, my:{} }
整个程序只有单一的
state,是一个state树对象,各个界面的拆分是主树干
2. 入口配置 index.js
// redux存储器 import store from "./store" // 注入store import { Provider } from 'react-redux' ReactDOM.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode>, document.getElementById('root') );
3.reducer
1.每个模块有一个
reducer,拆完在组合起来2.首先在根store里面进行修改
// 引入合并函数 import { createStore ,combineReducers} from "redux"; import reducer404 from '../pages/404/store/reducer404.js' // 合并reducer let allReducers = combineReducers({ page404:reducer404 }) let store = createStore(allReducers)
combineReducers合并函数 ,合并各个界面的分支reducer
4.reducer完全拆分
1.
reducer404位置src/pages/404/store/reducer404.js2.剪切
store里面的reducer相关内容 (我是在之前课件基础上进行改的,所以剪切),之前没写过直接配置也一样
- 需要管理的
state配置reducer配置
// 初始状态 let defaultState = { counter: 0, } // redux的核心配置，中间处理器 ，记录状态的改变 function reducer404(state=defaultState,action){ switch (action.type){ case "counter/incremented":{ let tempState = JSON.parse(JSON.stringify(state)); tempState.counter += action.payload return tempState } case "counter/decremented":{ return{ ...state, counter:state.counter - action.payload } } default:{ console.log("switch 默认") return state } } } export default reducer404
5.合并reducer
根
store文件
5.1 核心代码
// 引入合并函数 import { createStore,combineReducers } from 'redux' // 引入模块的reducer import reducer404 from '../pages/404/store/reducer404' // 合并reducer,并返回所有的reducer let allReducers = combineReducers({ // 通过page404 找404 模块的reducer page404: reducer404 }) let store = createStore(allReducers) export default store
5.2 combineReducers 作用
默默的产生了一个最大的state, 整个程序只有单一的
state,是一个state树对象,各个界面的拆分是主树干
bigState = { page404:{counter:0}, address:{}, my:{}, friend:{} }
6. redux 常规用法
还是404 界面练手
vscode安装了React Redux ES6 Snippets插件
6.1 基本结构 connect链接函数
直接打
connect会生成基本结构代码略加修改就可以了
import { connect } from 'react-redux' export default connect(mapStateToProps, mapDispatchToProps)(Component404)
