redux、react-redux、redux-saga的使用

最新推荐文章于 2023-05-21 20:23:31 发布

sunqy1995

最新推荐文章于 2023-05-21 20:23:31 发布

阅读量476

点赞数

分类专栏： react 文章标签： react.js

本文链接：https://blog.csdn.net/sunqy1995/article/details/120231069

版权

本文详细介绍了Redux的状态管理，包括安装、state、Action和Reducer的使用，探讨了如何处理state和Action，以及模块化reducers。接着讲解了react-redux的安装、如何传入Store以及在组件中使用state数据。最后，文章深入解析了redux-saga的安装、功能和配置，强调其在异步操作中的作用。

摘要由CSDN通过智能技术生成

Redux

安装

# NPM
npm install redux
# Yarn
yarn add redux

state

state就是存放数据的地方
state数据需要通过reducer来管理
发起reducer需要通过dispatch
dispatch的参数是一个action
总结来说，state的修改需要通过dispatch发起一个action，然后通过reducers返回一个新的state。

Action

action是把数据从应用传到store的有效载荷，是store数据的唯一来源。
需要通过store.dispatch()将action传到store
格式中type是固定的字段，其他字段可以自定义

// 一个简单的action函数
const ADD_TODO = 'ADD_TODO'；
function addTodo(payload) {
   
    return {
   
        type: ADD_TODO, // 这里一般会做成一个常量，避免书写是出错
        payload, // 需要传给reducer的数据
    }
}
// 用法
dispatch(addTodo(0))

Reducer

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新state。

设计state结构

在 Redux 应用中，所有的 state 都被保存在一个单一对象中。

Action 处理

需要通过type区分出来需要如何修改数据，调用不同的方法
修改state的数据，只能返回新的state，不可以直接修改state的数据
reducers接受两个参数，一个是state，一个是action返回的对象

const ADD_TODO = 'ADD_TODO';
// 初始化state
const initialState = {
   
    todos: []
}
// 处理todos部分的数据
function todos(state = [], action) {
   
    switch (action.type) {
   
        case ADD_TODO: 
        return [