react redux和@reduxjs/toolkit工具
1，安装
npm i @reduxjs/toolkit react-redux
2，目录
- store
- modules
- counterStore.js
- index.js
- modules
3，最外层index.js引入
import store from './store'
import { Provider } from 'react-redux'<Provider store={store}><App /></Provider>
4,编写counterStore.js
import { createSlice } from "@reduxjs/toolkit"const counterStore = createSlice({name: 'counter',// 初始化stateinitialState: {count: 0},// 修改状态的方法 同步方法 支持直接修改reducers: {inscrement (state) {state.count++},decrement (state) {state.count--}}
})// 解构出来actionCreate函数
const { inscrement, decrement } = counterStore.actions// 获取reducer
const reducer = counterStore.reducer// 以按需的方式导出actionCreate
export { inscrement, decrement }// 以默认导出方式导出reducer
export default reducer
5，store/index.js引入子模块
import { configureStore } from "@reduxjs/toolkit"
// 导入子模块reducer
import counterReducer from "./modules/counterStore"const store = configureStore({reducer: {counter: counterReducer}
})export default store
6，相应文件调用
import { useSelector, useDispatch } from "react-redux"
// 导入创建action对象的方法
import { inscrement, decrement } from "./store/modules/counterStore"function App () {// 这里的state.counter的counter与store/index.js下的counter相对应const { count } = useSelector(state => state.counter)// 得到dispatch函数const dispatch = useDispatch()return (<div className="App">{/* 调用dispatch提交action对象 */}<button onClick={() => dispatch(inscrement())}>++</button>{count}<button onClick={() => dispatch(decrement())}>--</button></div>)
}export default App
7,提交action传参实现需求
在reducers的同步修改方法中添加action对象参数，在调用actionCreater的时候传递参数，参数会被传递到action对象payload属性上
// counterStore.jsreducers: {// 传参addToNumber (state, action) {state.count = action.payload}}// 添加addToNumber
const { addToNumber } = counterStore.actions
export { addToNumber }
使用
import { addToNumber } from "./store/modules/counterStore"
<button onClick={() => dispatch(addToNumber(10))}>to 10</button>