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(
  // 
  <Provider store={store}>
    <App />
  </Provider>
  // ,
)

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的基础知识。