使用React Redux实现React组件之间的数据共享_Javascript

实现react组件之间的数据共享：使用react redux

在复杂的react应用中，组件之间的数据共享是必不可少的。为了解决这个问题，可以使用react redux来管理应用的状态，并实现组件之间的数据共享。在本文中，我们将介绍如何使用react redux实现count和person组件之间的数据共享。

1. 准备工作

首先，我们需要安装react redux和相关的依赖：

npm install react-redux redux redux-thunk --save

2. 创建redux store

redux store是一个存储应用程序状态的容器，它提供了一种统一管理状态的机制。在创建redux store之前，我们需要先定义应用程序的状态结构，并编写相应的reducer函数来处理状态的变化。接下来，让我们一步步创建redux store。

2.1. 定义状态结构

在开始创建redux store之前，我们需要定义应用程序的状态结构。在这个示例中，我们的应用程序包含两个主要的状态：count和persons。count状态用于存储计数器的值，而persons状态用于存储人员信息列表。我们可以在reducers/count.js和reducers/person.js中定义这些状态的初始值和处理方法。

// reducers/count.js
import { count_add } from '../constant';

const initstate = 0;

export default function countreducer(prestate = initstate, action) {
  const { type, data } = action;
  switch (type) {
    case count_add:
      const { value1, value2 } = data;
      return value1 + value2;
    default:
      return prestate;
  }
}

// reducers/person.js
import { person_add } from '../constant';

const initstate = [];

export default function personreducer(prestate = initstate, action) {
  const { type, data } = action;
  switch (type) {
    case person_add:
      return [data, ...prestate];
    default:
      return prestate;
  }
}

2.2. 创建redux store

现在我们可以开始创建redux store了。redux提供了一个createstore函数用于创建redux store，我们需要将应用程序的所有reducer函数传入createstore中，并可选地使用applymiddleware函数来应用中间件。

// store.js
import { createstore, applymiddleware, combinereducers } from 'redux';
import thunk from 'redux-thunk';

import countreducer from './reducers/count';
import personreducer from './reducers/person';

// 组合所有的reducer
const rootreducer = combinereducers({
  count: countreducer,
  persons: personreducer,
});

// 创建redux store，并应用中间件
const store = createstore(rootreducer, applymiddleware(thunk));

export default store;

通过上述步骤，我们成功创建了redux store，并且应用了中间件。现在我们可以在应用程序中使用这个redux store来存储和管理应用程序的状态了。

3. 创建count组件

count组件用于展示一个加法计算器，并实现与redux store的连接。我们使用connect函数将count组件与redux store连接起来，并实现数据共享：

// containers/count/index.jsx
import { connect } from 'react-redux';
import react, { component } from 'react';
import { inputnumber, button } from 'antd';

import { createasyncaddaction } from '../../actions/count';

class countui extends component {
  state = {
    value1: 0,
    value2: 0,
  }

  add = () => {
    const { value1, value2 } = this.state;
    this.props.add({ value1, value2 });
  }

  render() {
    const { value1, value2 } = this.state;
    const { total, persons } = this.props;

    return (
      <div>
        <h2>我是count组件，person组件的录入人数是：{persons.length}</h2>
        <inputnumber value={value1} onchange={ val => this.setstate({ value1: val }) } /> +
        <inputnumber value={value2} onchange={ val => this.setstate({ value2: val }) } />
        <button type="link" onclick={this.add}>=</button>
        {total}
      </div>
    )
  }
}

export default connect(
  state => ({ total: state.count, persons: state.persons }),
  {
    add: createasyncaddaction,
  }
)(countui);

4. 创建person组件

person组件用于展示一个人员信息表格，并实现与redux store的连接。我们同样使用connect函数将person组件与redux store连接起来，实现数据共享：

// containers/person/index.jsx
import react, { component } from 'react';
import { input, button, table } from 'antd';
import { nanoid } from 'nanoid';
import { connect } from 'react-redux';

import { createaddaction } from '../../actions/person';

const columns = [
  {
    title: '姓名',
    dataindex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataindex: 'age',
    key: 'age',
  },
];

class person extends component {
  state = {
    name: '',
    age: '',
  }

  add = () => {
    const { name, age } = this.state;
    const person = { key: nanoid(), name, age };
    this.props.add(person);
    this.setstate({ name: '', age: '' });
  }

  render() {
    const { persons, total } = this.props;
    const { name, age } = this.state;

    return (
      <div>
        <h2>我是person组件，count组件的求和结果是{total}</h2>
        <input
          placeholder="姓名"
          value={name}
          onchange={e => this.setstate({ name: e.target.value })}
        />
        <input
          placeholder="年龄"
          value={age}
          onchange={e => this.setstate({ age: e.target.value })}
        />
        <button onclick={this.add} type="primary">添加</button>
        <table datasource={persons} columns={columns} />
      </div>
    )
  }
}

export default connect(
  state => ({ persons: state.persons, total: state.count }),
  {
    add: createaddaction,
  }
)(person);

5. 整合react组件

最后，我们在应用的入口文件中将count和person组件放置在provider组件中，以便整个应用可以访问redux store中的状态：

// app.jsx
import react, { component } from 'react';
import { provider } from 'react-redux';

import store from './store';
import count from './containers/count';
import person from './containers/person';

export default class app extends component {
  render() {
    return (
      <provider store={store}>
        <count />
        <hr />
        <person />
      </provider>
    )
  }
}