Redux+React-Redux 入门秘籍：从零到高手

前端

2023-05-25 02:00:19

Redux和React-Redux：一个初学者的入门指南

什么是Redux？

Redux是一个JavaScript应用程序中的状态管理库，可帮助开发者轻松管理和共享应用程序的数据。它源自Flux架构，但进行了优化，使其更灵活、更易于使用。

Redux的核心概念

存储 (Store)： Redux的核心是存储，它包含应用程序的当前状态。

动作 (Action)： 动作是如何更改存储状态的对象，每个动作都有一个唯一的类型。

还原程序 (Reducer)： 还原程序是更新存储状态的纯函数，根据动作的类型来修改状态。

React-Redux

React-Redux是将Redux集成到React应用程序中的绑定库。它提供了一组组件，使您可以无缝地将Redux与React应用程序连接起来。

入门指南

1. 安装 Redux 和 React-Redux

npm install redux react-redux

2. 创建 Redux 存储

const store = createStore(reducer);

3. 创建动作

const incrementCount = {
  type: 'INCREMENT_COUNT'
};

4. 创建还原程序

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

5. 将还原程序注册到存储

const rootReducer = combineReducers({
  counter: counterReducer
});

const store = createStore(rootReducer);

6. 使用 React-Redux 连接 React 组件

import { connect } from 'react-redux';

const Counter = ({ count, incrementCount }) => (
  <div>
    <h1>Count: {count}</h1>
    <button onClick={incrementCount}>Increment</button>
  </div>
);

const mapStateToProps = (state) => ({
  count: state.counter
});

const mapDispatchToProps = (dispatch) => ({
  incrementCount: () => dispatch(incrementCount)
});

export default connect(mapStateToProps, mapDispatchToProps)(Counter);