我正在做一个使用 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);
reducers.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 Store 中遇到该错误。会不会是任何模块的版本问题或类似问题?
我正在使用 yarn 1.12.3 和 nodejs v8.12.0
如果我需要显示任何其他文件,请告诉我。
最佳答案
不要传递 store
实例到 <App>
.这什么都不做,React-Redux v6 会警告你这一点。
在 React-Redux v5 中,允许将 store 作为 prop 直接传递给连接的组件,并且在极少数情况下有用,但在 v6 中已被删除。
请看我的帖子Idiomatic Redux: The History and Implementation of React-Redux有关为什么删除该 API 部分的一些详细信息。
另外,请注意从 mapState
返回整个 Redux 状态对象这通常不是一个好主意,如果出于某种原因你确实确实想这样做,你不需要传播它 - 只需 return state
.参见 the React-Redux docs section on writing mapState
functions一些解释。
关于node.js - 在 props 中传递 Redux store,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53675466/