了解基础的 Redux 知识-JavaScript中文网-JavaScript教程资源分享门户

简介

Redux 是一种 JavaScript 库，它是一个用于管理应用程序状态的可预测的状态容器。它与 React.js 一起使用最为广泛，但也可以与其他视图库一起使用。

Redux 的核心概念是，应用程序的状态存储在一个单一的对象中，称为 "store"。 "Action" 是改变状态的唯一方法，它们描述了在应用程序中发生了什么样的操作。 "Reducers" 是用来更新状态的纯函数。

Redux Store

Redux 中的 "store" 是一个状态容器。它是一个 JavaScript 对象，存储了整个应用程序的状态。整个应用程序的状态以一个对象树的形式存储。

创建一个 Redux store 的方法，如下所示：

import { createStore } from 'redux'

const reducer = (state, action) => {
  // reducer 代码
}

const store = createStore(reducer)

在这个示例代码中，createStore 函数接受一个 reducer 函数作为参数。reducer 函数是一个纯函数，用于计算应用程序的下一个状态，它接受两个参数：当前状态和要执行的操作 "action"。

Redux Action

"Action" 是一个普通的 JavaScript 对象，用于描述应用程序中的事件。 "Action" 构成了应用程序的唯一数据源。它们是按照 "type" 形式指定操作的类型，同时也包含了操作所需的其他数据。

const ADD_TODO = 'ADD_TODO'

const addTodoAction = (text) => ({
  type: ADD_TODO,
  text
})

在这个示例代码中，addTodoAction 函数返回一个包含 "type" 和其他数据的对象，表示添加一个新的 "todo" 项。

Redux Reducer

"Reducer" 是一个用于计算下一个状态的纯函数。它是一个接收先前状态和要执行的 "action" 的参数的函数，返回新的应用程序状态。

// javascriptcn.com 代码示例
const initialState = {
  todos: []
}

const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      }
    default:
      return state
  }
}

在这个示例代码中，"todoReducer" 函数接收 "state" 和 "action"，并根据 "action" 的 "type" 返回一个新的状态。

Redux Store 的使用

在使用 Redux Store 的过程中，我们需要调度 "Action"，并使用 "Reducer" 更新应用程序的状态。我们可以使用 store.dispatch 函数来派发 "Action"。

store.dispatch(addTodoAction('Learn Redux'))

每次调度 "Action" 后，"Reducer" 将计算新的状态并更新存储在 "store" 中的状态。我们可以使用 store.getState 函数来获取当前应用程序的状态。

const currentState = store.getState()

总结

Redux 是一个用于管理应用程序状态的库，它使用一个中央 "store" 存储整个应用程序的状态。在 Redux 中，操作界面的唯一方法是发送 "Action"，"Reducer" 是用于更新状态的纯函数。通过使用 Redux 可以使应用程序状态更可预测，方便调试和修改。

参考资料

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654b44877d4982a6eb52d4ba