如何在不使用商店的情况下调用调度

时间:2020-04-09 18:02:26

标签: reactjs redux react-redux

我是Redux的新手,什么是正确的方法

我知道我应该使用中间层,但是我对这个概念不太清楚


import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { Switch, Route, BrowserRouter } from 'react-router-dom';
import environment from '../../commons/enviroment.const';
import Loader from '../loader/Loader';

import store from '../../store/store';
import { routes as routesConst, context } from '../../commons/routes/routes.const';

import MandateConsulting from '../mandate-consulting/MandateConsulting';
import { doResetStore } from '../../store/config/actions/actions';

class App extends Component {

  componentWillMount(){
    store.dispatch(doResetStore());
  }

  render() {
    return (
      <Provider store={store}>
        <BrowserRouter basename={context()}>
            <div id={environment.appName} className="ui-kit-reset">
              <Loader />
              <Switch>
                <Route exact path={routesConst.etd} component={MandateConsulting} />
                <Route exact path={routesConst.default} component={MandateConsulting} />
              </Switch>
            </div>
        </BrowserRouter>
      </Provider>
    );
  }
}

export default App;

动作

这是应该在一切之前执行的动作

const doResetStore = () => {
    return (dispatch) => {
        dispatch({ type: RESET });
    };
};

export {
    doResetStore
};

2 个答案:

答案 0 :(得分:1)

store是存储数据的位置。组件将连接到存储以获取所需的数据。

您通过

连接商店
import { connect } from "react-redux";

连接存储或为组件提供存储是react-redux的工作。 假设您拥有自己的组件

 class MyComponent {

  }

您可以像这样连接商店:

enter code here导出默认的connect()(MyComponent)

一旦您的组件连接到商店,就会在组件的道具列表中添加 dispatch 方法。

您使用'dispatch'更改了商店,您可以将其视为this.setState()。使用dispatch(),您正在将对象内部的消息发送到商店,并告诉商店根据您发送的消息进行更改。

您在上面定义的

doResetStore操作将把该操作发送到商店,该操作将通过您定义的化简器,化简器将看到您发送了type:RESET。减速器已经基于'type'属性知道了要做什么。一旦减速器看到'type:RESET',它将按照您的告诉方式更改存储。

您应将操作存储在/ src / actions目录中。然后将它们导入组件内部,并将其作为参数传递给dispatch()。

答案 1 :(得分:0)

您需要一个映射mapsDispatchToProps的容器。

https://react-redux.js.org/using-react-redux/connect-mapdispatch

创建一个文件,该文件将导入您的组件并将您的操作映射到道具。然后,您无需存储即可使用它。