简述Redux 怎么实现属性传递，介绍下原理？

React面试题 5月前 0 46

Redux 是一个用于管理 JavaScript 应用的状态的库。它的设计理念是将应用的所有状态存储在一个统一的对象中，这个对象被称为 “store”。所有的状态改变都通过 “action”（描述了什么事情发生了）和 “reducer”（描述了如何改变状态）来进行。

以下是 Redux 属性传递的主要步骤：

派发（Dispatch）动作（Action）：当你的应用中的某个事件发生（例如用户点击了一个按钮），你会派发一个 Action。这个 Action 是一个包含 type 属性的普通 JavaScript 对象，type 描述了发生了什么事情，同时这个对象也可以包含其他描述事件详情的数据。
Reducer 处理 Action：Reducer 是一个纯函数，接收当前的状态和一个 Action，然后返回一个新的状态。Reducer 会根据 Action 的 type，来决定如何更新状态。
Store 更新：Store 会把新的状态替换原来的状态。Store 是整个应用状态的唯一来源，你可以通过 store.getState() 来获取当前的状态。
组件获取新的状态：Redux 提供了 react-redux 库，其中的 connect 函数可以将 Redux Store 中的状态映射到 React 组件的 props，从而当 Store 中的状态发生变化时，组件能够重新渲染。

例如，假设我们有一个简单的计数器应用，我们可以这样使用 Redux：

// Action
const increment = () => {
  return {
    type: 'INCREMENT'
  };
};

// Reducer
const counter = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    default:
      return state;
  }
};

// Store
let store = createStore(counter);

// Dispatch
store.dispatch(increment());

// React component
function Counter({ count, increment }) {
  return (
    <div>
      Count: {count}
      <button onClick={increment}>+</button>
    </div>
  );
}

// Connect to Redux
const mapStateToProps = state => ({ count: state });
const mapDispatchToProps = { increment };
Counter = connect(mapStateToProps, mapDispatchToProps)(Counter);

在这个例子中，Counter 组件的 count 属性来自于 Redux Store，当我们点击 “+” 按钮时，会派发一个 INCREMENT Action，Reducer 会处理这个 Action，然后更新 Store，最后 Counter 组件会重新渲染显示新的计数。

发表评论 取消回复

发表评论取消回复