react-redux入门版-你想了解的这里都有
1. 什么是redux？
redux是一个独立的，开源的，第三方的集中式的状态管理器。redux除了和React一起用外，还支持其它界面库。它体小精悍(只有2kB，包括依赖)- 我们知道
react是一个单项数据流框架，state数据具有只读属性，在组件通讯中:
父传子：直接通过prop传递，
子传父：通过父传递给子方法，子组件调用这个方法进行传参，
子传子︰兄弟传参，状态提升，可以把他们的状态提升到公共的父组件中或者使用exentBus创建公共容器。 - 那么更复杂的组件关系该如何传参，如果某个状态组件需要被其他所有组件共享，那是不是每个组件都需要进行传递参数和接收参数，因此，
redux就是为了解决这个问题，为我们提供一个可以存放共享状态的仓库。
我们来看一下redux的工作原理图
2. redux的核心概念：
核心概念：store、action、reducer
2.1 store
store：仓库，Redux 的核心，整合 action 和 reducer
特点：
- 一个应用有且只能有一个store， 整个应用需要管理的数据都在这个Store里面，他相当于一个最高指挥家，他负责把action动作交给对应的reducer进行执行，也就是说将state、action和reducer联系在一起的对象。
- 这个Store我们不能直接去改变，我们只能通过返回一个新的Store去更改它。redux提供了一个createStore来创建state
import { createStore } from 'redux'
const store = createStore(reducer)
action：动作
一个js对象，包含两个属性：
- type： 标识属性，值是字符串。多个type用action分开
- payload：数据属性，可选。表示本次动作携带的数据
- 这个 action 指的是视图层发起的一个操作，告诉Store 我们需要改变。比如用户点击了按钮，我们就要去请求列表，列表的数据就会变更。每个 action 必须有一个 type 属性，这表示 action 的名称，然后还可以有一个 payload 属性，这个属性可以带一些参数，用作 Store 变更：
const action = {
type: 'ADD_ITEM',
payload: 'new item', // 可选属性
}
reducer：处理器
-
初始化状态
-
修改状态
-
在redux中，reducers是用来处理action的纯函数。当一个action发生时，reducers会根据action中的type和payload来更新store中的state。reducers接收当前的state和action，并返回一个新的state，而不会对原有的state进行修改。
-
reducers被设计为纯函数，所以它们不会有副作用，也不会改变传递给它们的参数。它们始终使用同样的输入来产生同样的输出，因此非常易于测试和调试。
-
比如像计算器我们需要在原来的数据上进行加1的操作，那么旧状态旧对应原来的数据，action对应加1的操作，返回的新状态就是计算器加完之后重新返回的结果。
在reduces定义 加减的案例
reducers: {
// 处理加法
increment: (state) => {
state.value += 1;
},
// 处理减法
decrement: (state) => {
state.value -= 1;
},
addValue: (state, action) => {
// action.payload为传入的参数
state.value += action.payload;
},
},
3. 使用redux
3.1 安装依赖@reduxjs/toolkit
npm i @reduxjs/toolkit react-redux -S
3.2 redux 代码具体配置
1 . 定义仓库
在src里面创建一个store文件夹的仓库，仓库就在此文件夹中编辑
下面是store中index.js的案例
// 引入configureStore 定义仓库
import { configureStore } from "@reduxjs/toolkit";
// 定义仓库
export const store = configureStore({
// 数据处理器
reducer: {},
});
2 . 全局注入仓库
main.js 中 导入仓库，导入Provider
用 Provider 标签包裹 App
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
// 导入仓库
import { store } from './store/index'
// 导入provider
import { Provider } from 'react-redux'
ReactDOM.createRoot(document.getElementById('root')).render(
// 3 . 定义仓库片段
在store文件中创建counterSlice.js切片文件
createSlice切片函数
name切片名称
initialState初始状态
reducers处理器
导出处理器和切片
导出异步操作
// 创建计数器切片 slice
// 导入创建切片的函数
import { createSlice } from "@reduxjs/toolkit";
// 定义初始状态
const initialState = { value: 5 };
// 创建切片
const counterSlice = createSlice({
// 切片名称
name: "counter",
// 初始状态
initialState,
// 定义处理器
reducers: {
// 处理加法
increment: (state) => {
state.value += 1;
},
// 处理减法
decrement: (state) => {
state.value -= 1;
},
addValue: (state, action) => {
// action.payload为传入的参数
state.value += action.payload;
},
},
});
// 导出处理器
export const { increment, decrement, addValue } = counterSlice.actions;
// 导出切片
export default counterSlice.reducer;
// 导出异步操作
export const syncAddValue=(value)=>(dispatch)=>{
setTimeout(()=>{
dispatch(addValue(value))
},2000)
}
4. 注册仓库片段
在store–>index.js 中 导入并注入counterSlice
// 引入configureStore 定义仓库
import { configureStore } from "@reduxjs/toolkit";
// 导入切片
import counter from "./counterSlice";
// 定义仓库
export const store = configureStore({
// 数据处理器
reducer: {
// 注册切片 键值对一致的简写
counter,
},
});
5. 使用仓库数据
导入useSelect，useDispatch，
导入counterSlice中定义的方法：increnment，decrement，addValue
通过dispatch(方法()）调用counterSlice中的方法
import { useSelector, useDispatch } from 'react-redux'
// 导入动作
import { increment, decrement, addValue } from '@/store/counterSlice'
function DashView() {
// 从store中获取数据
const value = useSelector((state) => state.counter.value)
// 获取dispatch
const dispatch = useDispatch()
return (<>
<h1>DashView页面 counter的值：{value}</h1>
<button onClick={() => dispatch(increment())}>+1</button>
<button onClick={()=>dispatch(decrement())}>-1</button>
<button onClick={()=>dispatch(addValue(5))}>+5</button>
</>);
}
export default DashView;
以上就是rudux的基础知识。