Redux

介绍

Redux 是一个 JavaScript 状态容器，提供可预测化的状态管理。

安装

npm install @reduxjs/toolkit@1 react-redux@8

• @reduxjs/toolkit：内置了很多了工具包，简化 Redux 的使用方式。
• react-redux：用于链接 React 和 Redux。

项目搭建

项目结构

/src
  /store
    /modules
      counter.js
      user.js
      // ...
    index.js

store/modules/counter.js

import { createSlice } from '@reduxjs/toolkit'
import type { RootDispatch } from '../index'

const counterStore = createSlice({
  name: 'counter',
  // 初始化 state
  initialState: {
    count: 0,
  },
  // 同步操作，直接修改
  reducers: {
    increment(state, action) {
      state.count += action.payload
    },
    decrement(state, action) {
      state.count -= action.payload
    },
  },
})

// 解构出 actionCreator
const { increment, decrement } = counterStore.actions

// 异步操作，返回一个函数
const asyncIncrement = (val: number) => {
  return async (dispatch: RootDispatch) => {
    setTimeout(() => {
      dispatch(increment(val * 100))
    }, 3000)
  }
}

// 获取 reducer
const reducer = counterStore.reducer

export { increment, decrement, asyncIncrement }
export default reducer

store/index.js

import { configureStore } from '@reduxjs/toolkit'
import counter from './modules/counter'

const store = configureStore({
  reducer: {
    counter,
  },
})

export type RootState = ReturnType<typeof store.getState>
export type RootDispatch = typeof store.dispatch

export default store

main.js

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { Provider } from 'react-redux'
import store from './store'

import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
)

使用

import { useSelector, useDispatch } from 'react-redux'
import type { RootState, RootDispatch } from '../../store'
import { increment, decrement, asyncIncrement } from '../../store/modules/counter'

function ReduxView() {
  // 获取 state 中的数据
  const { count } = useSelector((state: RootState) => state.counter)
  // 获取 dispatch 方法
  const dispatch = useDispatch<RootDispatch>()

  return (
    <>
      {/* 调用 dispatch 方法  */}
      <button onClick={() => dispatch(increment(2))}>+2</button>
      {/* 异步 dispatch  */}
      <button onClick={() => dispatch(asyncIncrement(2))}>异步 ++</button>
      <span>{count}</span>
      <button onClick={() => dispatch(decrement(1))}>-1</button>
    </>
  )
}

export default ReduxView