我是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
};
答案 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
创建一个文件,该文件将导入您的组件并将您的操作映射到道具。然后,您无需存储即可使用它。