把组件连上仓库，Redux配React-Redux更欢喜**

2024-01-24 04:49:59

在开发React应用程序时，redux和react-redux是一个非常受欢迎的组合。Redux是一个状态管理库，它可以帮助您管理应用程序的状态，而react-redux是一个React库，它可以帮助您将React组件连接到Redux存储库。

通过使用Redux和react-redux，您可以更轻松地构建复杂的应用程序。

Redux：Redux是一个状态管理库，它可以帮助您管理应用程序的状态。Redux使用单向数据流，这意味着状态只能从一个地方修改。这使得调试和理解应用程序的状态变得更加容易。
React-Redux：React-Redux是一个React库，它可以帮助您将React组件连接到Redux存储库。React-Redux提供了一个名为connect()的高阶组件，该组件可以将React组件连接到Redux存储库。

现在，让我们一起来看看如何将React组件与Redux存储库连接起来。

安装Redux和React-Redux

npm install redux react-redux

创建Redux存储库

import { createStore } from 'redux';

const store = createStore(reducer);

创建React组件

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Counter extends Component {
  render() {
    return (
      <div>
        <h1>Count: {this.props.count}</h1>
        <button onClick={this.props.increment}>Increment</button>
      </div>
    );
  }
}

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

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

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

将组件连接到Redux存储库

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

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