在 props 中传递 Redux store

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 中，允许将 store 作为 prop 直接传递给连接的组件，并且在极少数情况下有用，但在 v6 中已被删除。

请参阅我的 post 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 访问状态 and/or 调度操作。

More info

Answer 3

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

来自发行说明：

We've brought back the ability to pass a store as a prop directly to connected components. This was removed in version 6 due to internal implementation changes (components no longer subscribed to the store directly). Some users expressed concerns that working with context in unit tests was not sufficient. Since our components use direct subscriptions again, we've reimplemented this option, and that should resolve those concerns.

在 props 中传递 Redux store

Passing Redux store in props

node.js

reactjs

redux

react-redux

yarnpkg