道具路过Redux商店



我正在大学做一个使用React和Redux构建应用程序的练习。当我使用Yarn启动服务器时,我会收到以下错误:

Passing redux store in props has been removed and does not do anything. 
To use a custom Redux store for specific components, create a custom React context with React.createContext(), and pass the context object to React-Redux's Provider and specific components like: 
<Provider context={MyContext}><ConnectedComponent context={MyContext} /></Provider>. 
You may also pass a {context : MyContext} option to connect

我的文件是:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import ReduxProvider from './redux/ReduxProvider';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<ReduxProvider />, document.getElementById('root'));
serviceWorker.unregister();

ReduxProvider

import { questions } from "../assets/mock-data.js";
import { Provider } from 'react-redux';
import GlobalState from "./reducers";
import { createStore } from 'redux';
import React from 'react';
import App from '../App';
export default class ReduxProvider extends React.Component {
constructor(props) {
super(props);
this.initialState = {
score: 0,
finished: false,
currentQuestion: 0,
questions: [ ...questions]
};
this.store = this.configureStore();
}
render() {
return (
<Provider store={ this.store }>
<div>
<App store={ this.store } />
</div>
</Provider>
);
}
configureStore() {
return createStore(GlobalState, this.initialState);
}
}

App.js

import React, { Component } from 'react';
import './App.css';
import { connect } from 'react-redux';
class App extends Component {
render() {
return (
<div className="App">
Hola
</div>
);
}
}
function mapStateToProps(state) {
return {
...state
};
}
export default connect(mapStateToProps)(App);

减速器.js

import { combineReducers } from 'redux';
function score(state = 0, action = {}) {
switch(action.type) {
default:
return state;
}
}
function finished(state = 0, action = {}) {
switch(action.type) {
default:
return state;
}
}
function currentQuestion(state = 0, action = {}) {
switch(action.type) {
default:
return state;
}
}
function questions(state = 0, action = {}) {
switch(action.type) {
default:
return state;
}
}
const GlobalState = (combineReducers({
score,
finished,
currentQuestion,
questions
}));
export default GlobalState;

到这个时候,我应该至少能够在没有任何错误的情况下运行应用程序,但我总是在Redux商店中遇到错误,我不知道为什么。可能是任何模块或类似模块的版本有问题吗?

我使用的是yarn 1.12.3和nodejs v8.12.0

告诉我是否还有其他文件需要显示。

不要将store实例传递给<App>。这毫无作用,React Redux v6正在警告您这一点。

在React Redux v5中,允许将存储作为道具直接传递给连接的组件,而且在极少数情况下它是有用的,但在v6中它已被删除。

请参阅我的文章《IdiomaticRedux:TheHistoryandImplementationofReact-Redux》,了解为什么API的这一部分被删除的一些细节。

此外,请注意,从mapState返回整个Redux状态对象通常不是一个好主意,如果由于某种原因您确实想这样做,则不需要扩展它,只需要扩展return state即可。请参阅React Redux文档中关于编写mapState函数的部分,以获得一些解释。

React Redux 7.0.1允许再次将store作为Prop传递。

来自发行说明:

我们恢复了将存储作为道具直接传递给连接组件的能力。由于内部实现更改(组件不再直接订阅存储(,这在版本6中被删除。一些用户表示担心,在单元测试中使用上下文是不够的。由于我们的组件再次使用直接订阅,我们重新实现了这个选项,这应该可以解决这些问题。

问题出现在ReduxProvider的第25行,即

<App store={this.store}>

该组件用Provider封装(可以,并且应该接受存储作为道具(,这样做的目的是使存储对应用程序的其他部分可用,因此不需要将存储直接传递到子组件中。

要访问存储,请使用connect函数将组件连接到存储,然后使用mapStateToProps/mapDispatchToProps访问状态和/或调度操作。

更多信息

相关内容

  • 没有找到相关文章

最新更新