简述Redux 怎么实现属性传递,介绍下原理 ?
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
组件会重新渲染显示新的计数。