用React 结合 Redux：实现counter示例

整体流程

使用React Toolkit创建counterStore

import { createSlice } from "@reduxjs/toolkit"

// 创建store
const counterStore = createSlice({
  name: 'counter',
  // 初始化的状态
  initialState: {
    count: 0
  },
  // 修改状态的方法，同步方法，在其中支持直接修改
  reducers: {
    // 增方法
    increment(state) {
      state.count++
    },
    // 减方法
    decrement(state) {
      state.count--
    }
  }
})

// 解构出来actionCreator函数
const { increment, decrement } = counterStore.actions
// 获取reducer
const reducer = counterStore.reducer

// 以按需导出的方式，导出actionCreator
export { increment, decrement }
// 以默认导出的方式导出reducer
export default reducer

在根store的入口文件中组合子模块store

import { configureStore } from "@reduxjs/toolkit"
import counterReducer from "./modules/counterStore"

// 生成根store
const store = configureStore({
  reducer: {
    counter: counterReducer
  }
})

export default store

为React注入store

react-redux这个中间件负责把Redux和React链接起来，它内置的Provider组件通过store参数把创建好的store实例注入到应用中，链接正式建立。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store'
import { Provider } from 'react-redux'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

React组件使用store中的数据

在React组件中使用store中的数据，需要用到一个钩子函数useSelector，它的作用是把store中的数据映射到组件中。

import { useSelector } from "react-redux"

function App() {
  const { count } = useSelector(state => state.counter)
  return (
    <div className="App">
      {count}
    </div>
  )
}

export default App

React组件修改store中的数据

在React组件中修改store中的数据需要借助另外一个hook函数useDispatch，它的作用是生成提交action对象的dispatch函数。

import { useDispatch, useSelector } from "react-redux"
// 导入actionCreator
import { increment, decrement } from "./store/modules/counterStore"

function App() {
  const { count } = useSelector(state => state.counter)
  const dispatch = useDispatch()
  return (
    <div className="App">
      <button onClick={() => dispatch(decrement())}>减1</button>
      {count}
      <button onClick={() => dispatch(increment())}>加1</button>
    </div>
  )
}

export default App