Redux - 状态管理框架-JavaScript中文网-JavaScript教程资源分享门户

简介

Redux 是一个 JavaScript 应用程序的状态容器，同时也是一个状态管理框架。它提供了可预测性、可维护性和可测试性，帮助开发者更好地构建大型复杂应用。Redux 独立于任何 UI 库，因此可以用于 React，Angular，Vue 甚至纯 JavaScript 应用程序。

Redux 基本思想是将应用程序的状态存储到一个单一的状态对象中，通过一个严格的流程控制每一次状态的变更。这种单向数据流的方式使得状态变更可控，同时也容易调试和维护。

核心概念

Action

Action 是一个普通的 JavaScript 对象，用于描述状态变更的动作。它必须包含一个 type 字段，表示动作的类型。其他字段根据具体应用场景而定，例如更新数据、请求网络数据等。

{
  type: 'ADD_TODO',
  text: 'Learn Redux'
}

Reducer

Reducer 是一个纯函数，用于描述状态的变更。它接收一个当前状态和一个 action 对象，并返回一个新的状态。Reducer 必须是纯函数，它不应该产生任何副作用，也不应该对传入的参数进行修改。

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    default:
      return state
  }
}

Store

Store 是一个应用程序的中心化状态容器，负责管理应用程序的状态。它只接收一个 reducer，一旦创建便无法更改。应用程序的状态存储在一个单一的状态树中。

import { createStore } from 'redux'
import todos from './reducers'

const store = createStore(todos)

Dispatch

通过 dispatch 方法，我们可以触发一个 Action，使得 Reducer 进行相应的状态变更。这是唯一能够改变状态的方法。

store.dispatch({
  type: 'ADD_TODO',
  text: 'Learn Redux'
})

示例代码

下面是一个简单的 Todo List 应用程序的示例代码。

import { createStore } from 'redux'

const ADD_TODO = 'ADD_TODO'
const TOGGLE_TODO = 'TOGGLE_TODO'
const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'

const VisibilityFilters = {
  SHOW_ALL: 'SHOW_ALL',
  SHOW_COMPLETED: 'SHOW_COMPLETED',
  SHOW_ACTIVE: 'SHOW_ACTIVE'
}

function addTodo (text) {
  return { type: ADD_TODO, text }
}

function toggleTodo (index) {
  return { type: TOGGLE_TODO, index }
}

function setVisibilityFilter (filter) {
  return { type: SET_VISIBILITY_FILTER, filter }
}

function todos (state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case TOGGLE_TODO:
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: !todo.completed
          })
        }
        return todo
      })
    default:
      return state
  }
}

function visibilityFilter (state = VisibilityFilters.SHOW_ALL, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return action.filter
    default:
      return state
  }
}

function todoApp (state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  }
}

const store = createStore(todoApp)

console.log(store.getState())

const unsubscribe = store.subscribe(() => {
  console.log(store.getState())
})

store.dispatch(addTodo('Learn Redux'))
store.dispatch(addTodo('Learn React'))
store.dispatch(toggleTodo(0))
store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED))

unsubscribe()

总结

Redux 提供了一个可预测、可维护和可测试的方式来管理应用程序的状态。它的核心概念包括 Action，Reducer，Store 和 Dispatch。通过一个严格的流程控制每一次状态的变更，使得状态变更可控，同时也容易调试和维护。可以将 Redux 与任何 UI 库一起使用，包括 React、Angular、Vue 甚至纯 JavaScript 应用程序。

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

Redux - 状态管理框架

简介