简化状态管理：使用Redux与React使用Redux的实用指南-DEV365 开发者社区

在与React开发用户界面时，许多专业人员选择Redux作为其首选州管理解决方案。 Redux具有可预测性和易用性，是管理应用程序状态的流行选择。

在这篇信息丰富的博客文章中，我们将引导您完成将Redux集成到您的React应用程序中的过程，从初始设置一直到无缝连接组件。

1.设置redux：

要开始在React应用中使用Redux，您需要安装两个必需软件包-Redux和React -Redux。可以通过NPM或纱线进行快速安装：

npm install redux react-redux

或


yarn add redux react-redux

2.创建Redux商店：

redux的核心是商店，该商店拥有您应用程序的整个状态树。要创建商店，您必须定义负责根据派遣动作更新状态的还原函数。还原器在返回新状态之前采取了当前状态和行动。

这是基本还原函数的示例：


const initialState = {
  counter: 0,
};


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

};

3.创建动作：

操作充当信息载体，触发应用程序状态内的变化。它们是带有type属性的简单JavaScript对象，描述了所执行的操作类型。

这是一个示例，说明了如何创建用于增加和减少计数器的动作：


const increment = () => ({
  type: 'INCREMENT',
});


const decrement = () => ({
  type: 'DECREMENT',
});

4.建立Redux商店：

要创建实际的redux商店，请使用Redux软件包提供的createStore函数并传递您的还原功能：


import { createStore } from 'redux';

const store = createStore(reducer);

5.将Redux与React连接：

使用React-Redux软件包中的Provider组件，您可以将React组件无缝连接到Redux Store。 Provider组件将商店作为道具接受，使您的应用程序中的所有组件都可以自动访问。

这是您在应用程序的输入点中设置Provider组件的方式：


import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

6.将React组件连接到Redux：

要访问您的React组件中的状态和调度操作，您将利用React-Redux提供的connect功能。

这是一个示例，演示了如何使用connect：
将组件连接到redux


import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';

const Counter = ({ counter, increment, decrement }) => {

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};


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


const mapDispatchToProps = {
  increment,
  decrement,
};


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

在此示例中，我们已成功将Counter组件连接到Redux Store。我们将counter状态与increment和decrement的动作一起绘制为道具。

在您的React应用程序中与Redux合作一开始似乎令人生畏，但它提供了一种有组织的方法来管理您的应用程序的状态。一旦掌握了基本概念，建立更复杂的应用就变得轻而易举。

只记得安装必要的依赖项，创建您的redux商店，定义操作和还原器，使用Provider和connect连接组件，然后访问组件中的状态和调度操作。

我们希望这篇博客文章能为您提供有关与Redux在React项目中合作的宝贵见解。

bilal1718 (Muhammad Bilal) · GitHub

Bilal1718有21个存储库。在GitHub上遵循其代码。

github.com