如何使用React-Redux (连接React和Redux)

2 年 ago
宇, 华
2 minutes

为了个人备忘录的目的。

在src/index.js中需要做的事情

从Redux中导入createStore方法。

创建一个用于创建STORE的方法。
在参数中指定reducer（如后面描述的）。

import { createStore } from 'redux';

2. 导入Provider组件

从 react-redux 中导入 Provider 组件，它是用于在 React 项目中使用 Redux 的中间件。然后将其放置在 React 项目中。

提供者组件是什么？

根据React Redux官方文档，只有嵌套在Provider组件内的范围中使用connect()连接的组件才能处理react-redux提供的功能。

通常情况下，除非它被嵌套在内部，否则无法使用连接组件。

Provider组件只接受名为store的props，字面意思上将通过这个props传递由createStore()创建的STORE。

import { Provider } from 'react-redux';

~~~~~中略~~~~~

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

3. 导入用于传递给STORE的REDUCER。

REDUCER应在其他文件中进行定义。
常见的做法是在src/reducers目录下创建目标特定的reducer文件，并进行切割。

在 src/index.js 中将遍布多个文件的 REDUCER 合并为一个，并传递给 STORE 的方法，请参考以下。
将 Redux 中多个 Reducer 进行合并的方法 – Qiita

import rootReducers from "./reducers"; // 指定がない場合はwebpackがデフォルトでindex.jsというファイルを指定してくれる

使用Redux时需要做的事情。

使用 React 和 Redux 的连接 connect()

– 登场人物们
– mapStateToProps : 将STORE所拥有的state传递给props并传递给子组件。
– mapDispatchToProps : 将调用DISPATCH的函数放入props并传递给子组件。

const mapStateToProps = (state) => { // Issueコンポーネント内で使用するstateを限定する役目
  return {
    // stateオブジェクトから指定できるのは、src/reducers/index.js でrootReducerにまとめたときのオブジェクトのkey名
    // key名がコンポーネントで受け取るpropsの名前になる
    // なので、子コンポーネントでは「issue」という名前で参照可能。
    issue: state.issue.data,
  };
}

/*
子コンポーネントからdispatchするときに、わざわざ `dispatch(actionCreator(追加したい要素))`しなくても、
この場合だと `addContents(追加したい要素)` でstoreにdispatchできるようになる。
*/
const mapDispatchToProps = dispatch => {
  return {
    addIssue: (payload) => {
      dispatch(actions.addIssue(payload));
    },
  }
}

连接（connect()）的语法

const ContainerInMiddle = connect(
  mapStateToProps,
  mapDispatchToProps
)(ChildComponent);

使用Redux连接的React组件的示例代码

import * as actions from '../actions';
import { connect } from 'react-redux';
import IssueContents from '../components/organisms/IssueContents';

const mapStateToProps = (state) => { // Issueコンポーネント内で使用するstateを限定する役目
  return {
    // stateオブジェクトから指定できるのは、src/reducers/index.js でrootReducerにまとめたときのオブジェクトのkey名
    // key名がコンポーネントで受け取るpropsの名前になる
    // なので、子コンポーネントでは「issue」という名前で参照可能。
    issue: state.issue.data,
  };
}

/*
  子コンポーネントからdispatchするときに、わざわざ `dispatch(actionCreator(追加したい要素))`しなくても、
  この場合だと `addContents(追加したい要素)` でstoreにdispatchできるようになる。
*/
const mapDispatchToProps = dispatch => {
  return {
    addIssue: (payload) => {
      dispatch(actions.addIssue(payload));
    },
  }
}

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

请引用以下内容：

▷关于Redux的connect方法
▷基础教程 | React Redux
▷在React和Redux中管理状态的方法｜Playground发表！应用开发公司技术博客

bannerAds