React学习笔记09

一、Redux与React-环境准备

配套工具：在React中使用redux，官方要求安装两个其他插件Redux Toolkit和react-redux

1.1、Redux Toolkit（RTK）

官方推荐编写Redux逻辑的方式，是一套工具的集合集，简化书写方式

1.2、react-redux

用来链接Redux和React组件的中间件

1.3、配置基础环境

1.3.1、使用CRA快速创建React项目

npx create-react-app react-redux

1.3.2、安装配套环境

npm i @reduxjs/toolkit react-redux

1.3.3、启动项目

npm run start

1.3.4、store目录设计

无论是Vue还是React，状态管理都叫store，他俩的异同如下：

1.通常集中状态管理的部分都会单独创建一个单独的‘store’目录（Vue中也是如此）

2.应用通常会有很多个子store模块，所以创建一个‘modules’目录，在内部编写业务分类的子store（Vue中也是如此）

3.store中的入口文件index.js的作用是组合modules中所有的子模块，并导出store（这里与Vue中有所不同，Vue单个模块已经导出，可以直接在组件中使用）

二、Redux与React-实现counter

整体路径熟悉

 2.1、使用React Toolkit创建counterStore

import { createSlice } from '@reduxjs/toolkit'const counterStore = createSlice({name: 'counter',// 状态初始数据initialState: {count: 0},// 修改数据的同步方法reducers: {increment(state) {state.count++},decrement(state) {state.count--},}
})// 结构出创建action对象的函数（actionCreater）
const { increment, decrement } = counterStore.actions
// 获取reducer函数
const createReducer = counterStore.reducer
// 导出创建action对象的函数和reducer函数
export {increment,decrement}
export default counterStore

counterStore.js

import {configureStore} from "@reduxjs/toolkit"import counterStore from "./modules/counterStore"// 创建根store组合子模块
const store = configureStore({reducer:{counter:counterStore}
})export default store

 index.js

2.2、为React注入store

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

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from './store'
import { Provider } from 'react-redux'const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Provider store={store}><App /></Provider>);

index.js

 2.3、React组件使用store中的数据

在React组件中使用store中的数据，需要用到一个钩子函数-useSelector，它的作用是把store中的数据映射到组件中，如何使用呢？如下：

import {useSelector} from 'react-redux'function App(){const {count} = useSelector(state=>state.counter)return (<div>{count}</div>)
}

2.4、React组件修改store中的数据

在React组件中修改store中的数据需要用到另一个hook函数-useDispatch，它的作用是生成提交action对象的dispatch函数，如何使用呢？如下：

import { useSelector, useDispatch } from 'react-redux'
// 导入创建action对象的方法
import { decrement, increment } from "./store/modules/counterStore";function App() {const { count } = useSelector(state => state.counter)// 得到dispatch函数const dispatch = useDispatch()return (<div className="App">{/* 使用dispatch提交action对象 */}<button onClick={() => dispatch(decrement())}>-</button><span>{count}</span><button onClick={() => dispatch(increment())}>+</button></div>)
}

下一章：Redux与React02