在React项目中添加Redux

Question

在React项目中添加redux（使用Redux重构一个简单项目）

考虑一个简单的项目，一个使用两个按钮的计数器应用程序，一个用于递增，另一个用于递减计数器值。

在实际情况下，我们使用状态来保存计数器值，如下所示：

在App.js中：

import React, {Component} from 'react';
import CounterApp from './CounterApp'

class App extends Component {
  render() {
    return (
      <CounterApp/>
    );
  }
}

export default App;

在CounterApp.js中：

import React, {Component} from 'react';

class CounterApp extends Component {
  state = {
    counter: 0
  };

  handleIncrement = () => {
    this.setState(prevState => ({
      counter: prevState.counter + 1
    }))
  };

  handleDecrement = () => {
    this.setState(prevState => ({
      counter: prevState.counter - 1
    }))
  };

  render() {
    return (
      <div>
        <button onClick={this.handleIncrement}>Increment</button>
        <p>{this.state.counter}</p>
        <button onClick={this.handleDecrement}>Decrement</button>
      </div>
    );
  }
}

export default CounterApp;

一个简单而基本的示例，该示例使用react类组件实现并由两个函数处理程序（handleIncrement和handleDecrement）处理

还有state一个值counter

我使用prevState它是因为，当您被迫使用this.state.in 时，这是最佳做法setState！

现在，Redux的实现将是什么？

Answer 1

首先，您需要通过或将redux和react-redux软件包安装到项目中。npmyarn

您只需使用一行代码即可安装它们：

npm install redux react-redux --save

或与纱线：

yarn add redux react-redux

现在返回项目并使用以下名称创建3个文件：

action.js，reducer.js 和 store.js

打开action.js文件。我们应该为此应用程序执行两个操作。一种用于增加，另一种用于减少。

在action.js中

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
const DECREMENT_COUNTER = 'DECREMENT_COUNTER';

const increment = () => ({type: INCREMENT_COUNTER});
const decrement = () => ({type: DECREMENT_COUNTER});

export {
  INCREMENT_COUNTER,
  DECREMENT_COUNTER,
  increment,
  decrement
}

action是简单的函数，从组件分派到redux，用于store通过化简器更改（状态）。

所以我们应该更改reducer.js：

import {INCREMENT_COUNTER, DECREMENT_COUNTER} from "./action";

const initialState = {
  counter: 0
};

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

export default reducer

使用redux的3条主要原则：

1-真理的单一来源。整个应用程序的状态存储在单个存储中的对象树中。

2-状态为只读。更改状态的唯一方法是发出一个动作，一个描述发生了什么的对象。

3-使用纯功能进行更改。

根据第二个原则，我们必须假定状态是不可变的，并且每种情况（在开关中）都必须单独返回状态。在返回状态中使用... state表示如果initialState将来会更改，则这些情况将正常工作（在此示例中，这是没有必要的）。

我们的行动职能是纯粹的（第三原则）

最后一个新文件store.js：

import {createStore} from "redux";
import reducer from './reducer'

const store = createStore(reducer);

export default store;

现在我们应该将此商店应用于我们的App组件。因此，打开App.js文件并进行以下更改：

在App.js中：

import React, {Component} from 'react';
import CounterApp from './CounterApp'
import {Provider} from 'react-redux'
import store from './store'

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <CounterApp/>
      </Provider>
    );
  }
}

export default App;

提供包裹的CounterApp组成部分，将传播store到App与CounterApp所有其他的子组件。

最后，更改CounterApp.js：

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

class CounterApp extends Component {

  handleIncrement = () => this.props.dispatch(increment());

  handleDecrement = () => this.props.dispatch(decrement());

  render() {
    return (
      <div>
        <button onClick={this.handleIncrement}>Increment</button>
        <p>{this.props.counter}</p>
        <button onClick={this.handleDecrement}>Decrement</button>
      </div>
    );
  }
}

const mapStateToProps = state => {
  const counter = state.counter;
  return {counter}
};

export default connect(mapStateToProps)(CounterApp);

我们正在使用increment＆decrement操作将操作分派到redux。

将state被删除，而不是状态中，我们创建一个特殊的功能mapStateToProps' and useconnect`的状态连接组件的道具。

大功告成！