redux简单入门

背景

今天想了解一下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
    },
  },
})