背景
今天想了解一下redux，于是看了一下官网，决定基于最新版本redux简单创建一个项目，尝试一下
创建项目
// js版本
npx create-react-app my-app --template redux
// ts版本
npx create-react-app my-app --template redux-typescript
这个template是依赖create-react-app能力扩展的自定义模板，对应模板地址是：https://github.com/reduxjs/cra-template-redux
本地运行
我是使用的ts版本创建的项目，创建后，执行以下命令，可以跑起一个本地服务。
// 依赖安装
yarn
// 本地运行
yarn start
相关的redux配置主要在src目录下，features/counter里面，我感觉目录结构很乱，简单重构了一版，地址：https://github.com/taomas/react-learn/tree/master/examples/redux-app-ts
代码解析
如何创建一个store并且注入到项目应用中
- 使用 reduxjs-toolkit 创建 store
- redux就是通过一个全局的store对象来让组件之间共享创建，reduxjs-toolkit的configureStore可以创建一个store
- 示例
import { configureStore } from "@reduxjs/toolkit"
export const store = configureStore({
reducer: {
counter: counterSlice.reducer,
},
})
通过configureStore创建的store，在入口的tsx文件里面，通过redux的Provider组件提供给整个项目应用
- 示例
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import { store } from "./stores/index"
import { Provider } from "react-redux"
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById("root")
)
reduxjs-toolkit的几个api
关于reduxjs-toolkit， 这是redux官方提供的一套使用redux最佳实践的工具方法包
- configureStore
- 入参
reducer：可以是一个reducer function或者一个slice reducers对象
middleware：Redux middleware的数组，包含redux的一些中间件写法
devTools：是否让redux devtools监测到，默认为true，正式环境可以设置为false
preloadedState：预加载的状态，或者是初始化store状态
enhancers：store的enhancers数组，可以参考redux的createStore()里面配置
- slice对象
通过createSlice可以创建一个slice对象，slice对象可以传到store的reducers里
import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit"
export const counterSlice = createSlice({
name: "counter",
initialState: {
value: 0,
status: "idle",
},
reducers: {
increment: (state) => {
state.value += 1
},
decrement: (state) => {
state.value -= 1
},
incrementByAmount: (state, action: PayloadAction<number>) => {
state.value += action.payload
},
},
})
