redux它的三个原则是什么?

112 阅读1分钟

"# Redux 的三个原则

Redux 是一个用于 JavaScript 应用程序的状态管理库,它有三个核心原则,这些原则为应用程序的结构和数据流提供了指导。

1. 单一数据源

Redux 维护一个单一的全局状态树,该状态树存储在一个对象中。这个单一的数据源使得应用程序的状态管理更加可预测和可调试。整个应用程序的状态存储在一个地方,简化了状态的管理和数据流。

const initialState = {
  user: null,
  posts: [],
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    case 'ADD_POST':
      return { ...state, posts: [...state.posts, action.payload] };
    default:
      return state;
  }
};

2. 状态是只读的

在 Redux 中,唯一可以改变状态的方式是通过派发一个动作(action)。状态本身是不可变的,只有通过创建新的状态对象来更新状态。这种设计确保了状态的变化是可预测的,并且可以轻松地进行调试和追踪。

const setUser = (user) => ({
  type: 'SET_USER',
  payload: user,
});

// 使用 dispatch 发送动作
store.dispatch(setUser({ name: 'Alice', age: 25 }));

3. 使用纯函数来执行修改

在 Redux 中,状态的变化是通过纯函数(reducer)来实现的。纯函数的特点是相同的输入总是产生相同的输出,并且不产生副作用。这使得状态更新的逻辑清晰且易于测试。

const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

// 创建动作
const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });

// 使用 dispatch 发送动作
store.dispatch(increment());
store.dispatch(decrement());

通过遵循这三个原则,Redux 提供了一种结构化的方式来管理应用程序的状态,增强了可维护性和可预测性。"