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',
// 初始化state
initialState: {
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.js
reducers: {
// 传参
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>