Redux

最新推荐文章于 2024-05-14 16:27:26 发布

努力的小桑

最新推荐文章于 2024-05-14 16:27:26 发布

阅读量53

点赞数

分类专栏： react 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/w418856/article/details/131243862

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

中文手册：https://www.reduxjs.cn/

Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理。

可以帮助你开发出行为稳定可预测的、运行于不同的环境（客户端、服务器、原生应用）、易于测试的应用程序。不仅于此，它还提供超爽的开发体验，比如有一个与时间旅行调试器相结合的实时代码编辑。

可以将 Redux 与 React 或其他视图库一起使用。它体小精悍（只有2kB，包括依赖），却有很强大的插件扩展生态。

单向数据流（one-way data flow）":

用 state 来描述应用程序在特定时间点的状况
基于 state 来渲染出 View
当发生某些事情时（例如用户单击按钮），state 会根据发生的事情进行更新，生成新的 state
基于新的 state 重新渲染 View

Redux 数据流

早些时候，我们谈到了“单向数据流”，它描述了更新应用程序的以下步骤序列：

State 描述了应用程序在特定时间点的状况
基于 state 来渲染视图
当发生某些事情时（例如用户单击按钮），state 会根据发生的事情进行更新
基于新的 state 重新渲染视图

具体来说，对于 Redux，我们可以将这些步骤分解为更详细的内容：

初始启动：

- 使用最顶层的 root reducer 函数创建 Redux store
- store 调用一次 root reducer，并将返回值保存为它的初始 state
- 当视图首次渲染时，视图组件访问 Redux store 的当前 state，并使用该数据来决定要呈现的内容。同时监听 store 的更新，以便他们可以知道 state 是否已更改。

更新环节：

- 应用程序中发生了某些事情，例如用户单击按钮
- dispatch 一个 action 到 Redux store，例如 dispatch({type: 'counter/increment'})
- store 用之前的 state 和当前的 action 再次运行 reducer 函数，并将返回值保存为新的 state
- store 通知所有订阅过的视图，通知它们 store 发生更新
- 每个订阅过 store 数据的视图组件都会检查它们需要的 state 部分是否被更新。
- 发现数据被更新的每个组件都强制使用新数据重新渲染，紧接着更新网页

动画的方式来表达数据流更新：

Redux 核心库

Redux 核心库同样有 NPM 软件包，可与模块捆绑器或 Node 应用程序一起使用，安装方式如下：

# NPM
npm install redux

# Yarn
yarn add redux

术语

在我们继续之前，你需要熟悉一些重要的 Redux 术语：

Action

action 是一个具有 type 字段的普通 JavaScript 对象。你可以将 action 视为描述应用程序中发生了什么的事件.

type 字段是一个字符串，给这个 action 一个描述性的名字，比如"todos/todoAdded"。我们通常把那个类型的字符串写成“域/事件名称”，其中第一部分是这个 action 所属的特征或类别，第二部分是发生的具体事情。

action 对象可以有其他字段，其中包含有关发生的事情的附加信息。按照惯例，我们将该信息放在名为 payload 的字段中。

一个典型的 action 对象可能如下所示：

const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'Buy milk'
}

Action Creator

action creator 是一个创建并返回一个 action 对象的函数。它的作用是让你不必每次都手动编写 action 对象：

const addTodo = text => {
  return {
    type: 'todos/todoAdded',
    payload: text
  }
}

Reducer

reducer 是一个函数，接收当前的 state 和一个 action 对象，必要时决定如何更新状态，并返回新状态。函数签名是：(state, action) => newState。 你可以将 reducer 视为一个事件监听器，它根据接收到的 action（事件）类型处理事件。

Reducer 必需符合以下规则：

仅使用 state 和 action 参数计算新的状态值
禁止直接修改 state。必须通过复制现有的 state 并对复制的值进行更改的方式来做 不可变更新（immutable updates）。
禁止任何异步逻辑、依赖随机值或导致其他“副作用”的代码

稍后我们将更多地讨论 reducer 的规则，包括为什么它们很重要以及如何正确地遵循它们。

reducer 函数内部的逻辑通常遵循以下步骤：

检查 reducer 是否关心这个 action

- 如果是，则复制 state，使用新值更新 state 副本，然后返回新 state

否则，返回原来的 state 不变

下面是 reducer 的小例子，展示了每个 reducer 应该遵循的步骤：

const initialState = { value: 0 }

function counterReducer(state = initialState, action) {
  // 检查 reducer 是否关心这个 action
  if (action.type === 'counter/increment') {
    // 如果是，复制 `state`
    return {
      ...state,
      // 使用新值更新 state 副本
      value: state.value + 1
    }
  }
  // 返回原来的 state 不变
  return state
}

Reducer 可以在内部使用任何类型的逻辑来决定新状态应该是什么，如 if/else、switch、循环等等。

Store

当前 Redux 应用的 state 存在于一个名为 store 的对象中。

store 是通过传入一个 reducer 来创建的，并且有一个名为 getState 的方法，它返回当前状态值：

import { createStore } from 'redux'

const store = createStore(Reducer)

console.log(store.getState())
// {value: 0}

Dispatch

Redux store 有一个方法叫 dispatch。更新 state 的唯一方法是调用 store.dispatch() 并传入一个 action 对象。 store 将执行所有 reducer 函数并计算出更新后的 state，调用 getState() 可以获取新 state。

store.dispatch({ type: 'counter/increment' })

console.log(store.getState())
// {value: 1}

dispatch 一个 action 可以形象的理解为 "触发一个事件"。发生了一些事情，我们希望 store 知道这件事。 Reducer 就像事件监听器一样，当它们收到关注的 action 后，它就会更新 state 作为响应。

我们通常调用 action creator 来调用 action：

const increment = () => {
  return {
    type: 'counter/increment'
  }
}

store.dispatch(increment())

console.log(store.getState())
// {value: 2}

Selector

Selector 函数可以从 store 状态树中提取指定的片段。随着应用变得越来越大，会遇到应用程序的不同部分需要读取相同的数据，selector 可以避免重复这样的读取逻辑：

const selectCounterValue = state => state.value

const currentValue = selectCounterValue(store.getState())
console.log(currentValue)
// 2

Redux 数据流

早些时候，我们谈到了“单向数据流”，它描述了更新应用程序的以下步骤序列：

State 描述了应用程序在特定时间点的状况
基于 state 来渲染视图
当发生某些事情时（例如用户单击按钮），state 会根据发生的事情进行更新
基于新的 state 重新渲染视图

具体来说，对于 Redux，我们可以将这些步骤分解为更详细的内容：

初始启动：

- 使用最顶层的 root reducer 函数创建 Redux store
- store 调用一次 root reducer，并将返回值保存为它的初始 state
- 当视图首次渲染时，视图组件访问 Redux store 的当前 state，并使用该数据来决定要呈现的内容。同时监听 store 的更新，以便他们可以知道 state 是否已更改。

更新环节：

- 应用程序中发生了某些事情，例如用户单击按钮
- dispatch 一个 action 到 Redux store，例如 dispatch({type: 'counter/increment'})
- store 用之前的 state 和当前的 action 再次运行 reducer 函数，并将返回值保存为新的 state
- store 通知所有订阅过的视图，通知它们 store 发生更新
- 每个订阅过 store 数据的视图组件都会检查它们需要的 state 部分是否被更新。
- 发现数据被更新的每个组件都强制使用新数据重新渲染，紧接着更新网页

总结

Redux 是一个管理全局应用状态的库

- Redux 通常与 React-Redux 库一起使用，把 Redux 和 React 集成在一起
- Redux Toolkit 是编写 Redux 逻辑的推荐方式

Redux 使用 "单向数据流"

- State 描述了应用程序在某个时间点的状态，视图基于该 state 渲染
- 当应用程序中发生某些事情时：

- - 视图 dispatch 一个 action
  - store 调用 reducer，随后根据发生的事情来更新 state
  - store 将 state 发生了变化的情况通知 UI

- 视图基于新 state 重新渲染

Redux 有这几种类型的代码

- Action 是有 type 字段的纯对象，描述发生了什么
- Reducer 是纯函数，基于先前的 state 和 action 来计算新的 state
- 每当 dispatch 一个 action 后，store 就会调用 root reducer

案例

reducer.js

const initState = {
  value: 0,
};

function Reducer(state = initState, action) {
  console.log(action);
  switch (action.type) {
    case "counter/incremented":
      return { value: state.value + 1 };
    case "counter/decremented":
      return { value: state.value - 1 };
    default:
      return state;
  }
}

export { Reducer };

action.js

const Action = () => ({
  type: "counter/incremented",
});

export { Action };

store.js

import { legacy_createStore } from "redux";

let store = legacy_createStore(Reducer);

export default store;

组件内调用

const About = () => {
  const [state, setstate] = useState({});
  //   useEffect(() => {
  //     store.subscribe(() => console.log(store.getState()));
  //   });
  return (
    <div>
      about--{store.getState().value}
      <button
        onClick={() => {
          store.dispatch();
          setstate({});
        }}
      >
        点击
      </button>
    </div>
  );
};

异步中间件

store.js 配置中间件，在 store 的创建中配置

import {createStore, applyMiddleware, compose} from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk'
 
// 设置中间件
const enhancer = applyMiddleware(thunk);
 
const store = createStore(reducer, enhancer);
 
export default store;

添加一个返回函数的 actionCreator，将异步请求逻辑放在里面

/**
  发送get请求，并生成相应action，更新store的函数
  @param url {string} 请求地址
  @param func {function} 真正需要生成的action对应的actionCreator
  @return {function} 
*/
// dispatch为自动接收的store.dispatch函数 
export const getHttpAction = (url, func) => (dispatch) => {
    axios.get(url).then(function(res){
        const action = func(res.data)
        dispatch(action)
    })
}

action生成器

function getInitTodoItemAction(params) {
  console.log(params);
  return {
    type: "abc",
    payload:params
  };
}

生成 action，并发送 action

componentDidMount(){
    var action = getHttpAction('/getData', getInitTodoItemAction)
    // 发送函数类型的action时，该action的函数体会自动执行
    store.dispatch(action)
}

努力的小桑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Redux

Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理。Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理。可以帮助你开发出行为稳定可预测的、运行于不同的环境（客户端、服务器、原生应用）、易于测试的应用程序。不仅于此，它还提供超爽的开发体验，比如有一个与时间旅行调试器相结合的实时代码编辑。可以将 Redux 与 React 或其他视图库一起使用。它体小精悍（只有2kB，包括依赖），却有很强大的插件扩展生态。
复制链接

扫一扫