常州外贸网站建设企业关键词优化价格

 

 

Redux 核心组件及作用

1. Store (状态仓库)

• 作用：应用状态的唯一数据源

• 特点：

  • 通过 createStore() 创建

  • 提供 getState() 获取当前状态

  • 提供 dispatch(action) 更新状态

  • 提供 subscribe(listener) 监听变化

javascript

import { createStore } from 'redux';
const store = createStore(rootReducer);

2. Action (动作)

• 作用：描述状态变化的普通对象

• 特点：

  • 必须有 type 属性（字符串常量）

  • 可携带 payload（有效载荷数据）

  • 通过 action creator 函数创建

// Action 示例
{type: 'ADD_TODO',payload: {id: 1,text: 'Learn Redux'}
}// Action Creator
const addTodo = text => ({type: 'ADD_TODO',payload: { text }
});

3. Reducer (归约器)

• 作用：纯函数，接收旧状态和 action，返回新状态

• 特点：

  • 禁止直接修改状态（必须返回新对象）

  • 无副作用（相同输入永远得到相同输出）

  • 通过 combineReducers 组合多个 reducer

// Reducer 示例
const todosReducer = (state = [], action) => {switch (action.type) {case 'ADD_TODO':return [...state, action.payload];case 'TOGGLE_TODO':return state.map(todo => todo.id === action.payload.id ? {...todo, completed: !todo.completed} : todo);default:return state;}
}

State更新过程详解：

Redux 核心原则

1. 单一数据源

整个应用状态存储在唯一 store 中，形成状态树

2. 状态只读

唯一改变状态的方式是 dispatch action，禁止直接修改

3. 纯函数修改

Reducer 必须是纯函数：

• 不修改输入参数

• 不执行副作用操作

• 相同输入 => 相同输出