用react-redux实现react组件之间数据共享的方法

React-Redux 实现 React 组件之间数据共享的方法 在 React 应用程序中，实现组件之间的数据共享是一件非常重要的事情。React-Redux 库提供了一种简便的方法来实现组件之间的数据共享。在本文中，我们将介绍如何使用 React-Redux 实现 React 组件之间的数据共享。 我们需要安装 React-Redux 库，可以使用以下命令：`$ npm i --save react-redux` 安装完成后，我们需要从 React-Redux 库中导入 Provider 组件和 connect 函数。Provider 组件用于将 store 赋予根组件，而 connect 函数用于将 store 中的数据映射到组件的 props 中。 ```jsx import { Provider, connect } from 'react-redux'; ``` 接下来，我们需要创建一个 store 并将其赋予 Provider 组件。 ```jsx const store = createStore(reducer); ReactDOM.render( <Provider store={store}> <Wrap /> </Provider>, document.getElementById('example') ); ``` 在上面的代码中，我们创建了一个 store 并将其赋予 Provider 组件，然后将根组件 Wrap 包裹在 Provider 组件中。这样，所有的子组件都可以获得 store 中的数据。 接下来，我们需要使用 connect 函数将 store 中的数据映射到组件的 props 中。connect 函数接受两个函数作为参数：mapStateToProps 和 mapDispatchToProps。mapStateToProps 函数用于定义哪些 store 属性将被映射到组件的 props 中，而 mapDispatchToProps 函数用于定义哪些行为可以作为组件的 props。 ```jsx function mapStateToProps(state) { return { name: state.name, pass: state.pass } } function mapDispatchToProps(dispatch) { return { actions: bindActionCreators(actions, dispatch) } } export default connect(mapStateToProps, mapDispatchToProps)(Wrap); ``` 在上面的代码中，我们定义了 mapStateToProps 函数将 store 中的 name 和 pass 属性映射到组件的 props 中，并定义了 mapDispatchToProps 函数将 actions 绑定到组件的 props 中。 接下来，我们可以在子组件中使用 store 中的数据。例如，在子组件 Show 中，我们可以使用以下代码来展示 store 中的数据： ```jsx <Show name={this.props.name} pass={this.props.pass} /> ``` 在子组件 Input 中，我们可以使用 actions 中的方法来更新 store 中的数据。例如，我们可以使用以下代码来创建一个 action 并更新 store 中的数据： ```jsx export default class Input extends React.Component { sure() { this.props.actions.add({ name: this.refs.name.value, pass: this.refs.pass.value }); } render() { return ( <div> 姓名：<input ref="name" type="text" /> 密码：<input ref="pass" type="text" /> <button onClick={this.sure.bind(this)}>登录</button> </div> ); } } ``` 在上面的代码中，我们使用 bindActionCreators 函数将 actions 绑定到组件的 props 中，然后在子组件中使用 actions 中的方法来更新 store 中的数据。 使用 React-Redux 库可以简便地实现 React 组件之间的数据共享。我们可以使用 Provider 组件将 store 赋予根组件，然后使用 connect 函数将 store 中的数据映射到组件的 props 中。这样，我们可以在不同的组件之间共享数据，实现了组件之间的数据共享。