使用React?Redux實(shí)現(xiàn)React組件之間的數(shù)據(jù)共享

更新時(shí)間：2024年03月22日 09:54:50 作者：JudithHuang

在復(fù)雜的React應(yīng)用中,組件之間的數(shù)據(jù)共享是必不可少的,為了解決這個(gè)問(wèn)題,可以使用React?Redux來(lái)管理應(yīng)用的狀態(tài),并實(shí)現(xiàn)組件之間的數(shù)據(jù)共享,在本文中,我們將介紹如何使用React?Redux實(shí)現(xiàn)Count和Person組件之間的數(shù)據(jù)共享,需要的朋友可以參考下

實(shí)現(xiàn)React組件之間的數(shù)據(jù)共享：使用React Redux

在復(fù)雜的React應(yīng)用中，組件之間的數(shù)據(jù)共享是必不可少的。為了解決這個(gè)問(wèn)題，可以使用React Redux來(lái)管理應(yīng)用的狀態(tài)，并實(shí)現(xiàn)組件之間的數(shù)據(jù)共享。在本文中，我們將介紹如何使用React Redux實(shí)現(xiàn)Count和Person組件之間的數(shù)據(jù)共享。

1. 準(zhǔn)備工作

首先，我們需要安裝React Redux和相關(guān)的依賴：

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

2. 創(chuàng)建Redux Store

Redux Store是一個(gè)存儲(chǔ)應(yīng)用程序狀態(tài)的容器，它提供了一種統(tǒng)一管理狀態(tài)的機(jī)制。在創(chuàng)建Redux Store之前，我們需要先定義應(yīng)用程序的狀態(tài)結(jié)構(gòu)，并編寫(xiě)相應(yīng)的Reducer函數(shù)來(lái)處理狀態(tài)的變化。接下來(lái)，讓我們一步步創(chuàng)建Redux Store。

2.1. 定義狀態(tài)結(jié)構(gòu)

在開(kāi)始創(chuàng)建Redux Store之前，我們需要定義應(yīng)用程序的狀態(tài)結(jié)構(gòu)。在這個(gè)示例中，我們的應(yīng)用程序包含兩個(gè)主要的狀態(tài)：count和persons。count狀態(tài)用于存儲(chǔ)計(jì)數(shù)器的值，而persons狀態(tài)用于存儲(chǔ)人員信息列表。我們可以在reducers/count.js和reducers/person.js中定義這些狀態(tài)的初始值和處理方法。

// 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. 創(chuàng)建Redux Store

現(xiàn)在我們可以開(kāi)始創(chuàng)建Redux Store了。Redux提供了一個(gè)createStore函數(shù)用于創(chuàng)建Redux Store，我們需要將應(yīng)用程序的所有Reducer函數(shù)傳入createStore中，并可選地使用applyMiddleware函數(shù)來(lái)應(yīng)用中間件。

// 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,
});

// 創(chuàng)建Redux Store，并應(yīng)用中間件
const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

通過(guò)上述步驟，我們成功創(chuàng)建了Redux Store，并且應(yīng)用了中間件?，F(xiàn)在我們可以在應(yīng)用程序中使用這個(gè)Redux Store來(lái)存儲(chǔ)和管理應(yīng)用程序的狀態(tài)了。

3. 創(chuàng)建Count組件

Count組件用于展示一個(gè)加法計(jì)算器，并實(shí)現(xiàn)與Redux Store的連接。我們使用connect函數(shù)將Count組件與Redux Store連接起來(lái)，并實(shí)現(xiàn)數(shù)據(jù)共享：

// 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組件的錄入人數(shù)是：{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. 創(chuàng)建Person組件

Person組件用于展示一個(gè)人員信息表格，并實(shí)現(xiàn)與Redux Store的連接。我們同樣使用connect函數(shù)將Person組件與Redux Store連接起來(lái)，實(shí)現(xiàn)數(shù)據(jù)共享：

// 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組件的求和結(jié)果是{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組件

最后，我們?cè)趹?yīng)用的入口文件中將Count和Person組件放置在Provider組件中，以便整個(gè)應(yīng)用可以訪問(wèn)Redux Store中的狀態(tài)：

// 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>
    )
  }
}

結(jié)語(yǔ)

通過(guò)以上步驟，我們成功實(shí)現(xiàn)了React組件之間的數(shù)據(jù)共享。Count組件和Person組件通過(guò)Redux Store共享數(shù)據(jù)，實(shí)現(xiàn)了狀態(tài)的統(tǒng)一管理和更新。這種基于React Redux的數(shù)據(jù)管理方式，能夠有效地提高應(yīng)用的可維護(hù)性和擴(kuò)展性，是構(gòu)建復(fù)雜應(yīng)用的一種有效方式。