安装
使用步骤
- 定义
reducer 函数(返回新的state)
- 使用
createStore
传入reducer函数 生成一个store实例对象
- 利用store对象的
subscribe方法
订阅数据的变化 - 利用store对象的
dispatch方法
提交action对象
触发数据变化(告诉reducer 怎么改数据) - 使用store实例的
getState方法
获取最新状态更新到视图中
实例
创建store
子模块
import { createSlice } from '@reduxjs/toolkit'
//创建state 切片
const countSlice = createSlice({
name: "counter",
//1.初始化state
initialState: {
count : 0
},
//2.修改状态的方法 同步方法 支持直接修改
// Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它
// 并不是真正的改变状态值,因为它使用了 Immer 库
// 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的state
reducers:{
increment(state){
state.count++
},
decrement(state){
state.count--
}
}
})
// 每个 case reducer 函数会生成对应的 Action creators
export const { increment , decrement} = countSlice.actions
// 获取reducer
export default countSlice.reducer
主模块
import { configureStore } from '@reduxjs/toolkit'
//导入子模块reducer
import counterReducer from './modules/counterSlice'
//创建store并导出
export default configureStore({
reducer: {
counter:counterReducer
}
})
react 注入 store
react- redux
连接 Redux 与React
内置Provider 组件
通过store参数把创建好的store实例注入到应用中建立连接
在react组件中使用store中的数据
数据映射到组件
使用hook函数
useSelector
将store中的数据映射到组件中
修改数据
使用hook函数
useDispatch
生成提交action对象的dispatch函数
//导入hook
import {useDispatch , useSelector} from "react-redux"
import { decrement, increment } from "./ReduxDemo/store/modules/counterSlice";
function App() {
//使用store中的数据
const {count } =
useSelector(state => state.counter)
//修改store中的数据
const dispatch = useDispatch();
return(
<>
<p>
App Page
</p>
{count}
<button onClick={()=>dispatch(increment())}>+</button>
<button onClick={()=>dispatch(decrement())}>-</button>
</>
)
}
export default App