Question

我正在大学实践中使用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

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

Answer 1

请勿将store实例传递给<App>。那什么也没做，React-Redux v6会警告您。

在React-Redux v5中，允许将商店作为道具直接传递到已连接的组件，在极少数情况下它是有用的，但在v6中已被删除。

请参阅我的帖子Idiomatic Redux: The History and Implementation of React-Redux，了解有关为何删除该部分API的详细信息。

另外，请注意，从mapState返回整个Redux状态对象通常不是一个好主意，并且如果出于某些原因您 do 确实想这样做，则您不会不需要传播它-仅return state。有关一些说明，请参见the React-Redux docs section on writing mapState functions。

Answer 2

问题出在ReduxProvider的第25行，即

<App store={this.store}>

该组件用Provider包装（可以，并且应该接受商店作为道具），其目的是使商店对其他应用程序可用-因此无需将商店直接传递到子组件中。

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

More info

Answer 3

React Redux 7.0.1允许再次传递RideCreated作为道具。

摘自发行说明：

我们带回了将商店作为道具直接传递给连接的组件的功能。由于内部实现的更改（组件不再直接订阅商店），在版本6中将其删除。一些用户表示担心在单元测试中使用上下文是不够的。由于我们的组件再次使用直接订阅，因此我们重新实现了此选项，这样就可以解决这些问题。

通过道具传递Redux商店

3 个答案: