Passing Redux store in props

问题:

I'm doing an University practice building an app using React and Redux. When I start the server using Yarn, I get this error:

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

My files are these:

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;

By this time, I should be able to at least run the app without any error, but I always get that error with the Redux Store I don't know why. Could it be a problem with the version of any module or something similar?

I'm using yarn 1.12.3 and nodejs v8.12.0

Tell me if there is any other file I need to show.

回答1:

Don't pass the store instance to <App>. That does nothing, and React-Redux v6 is warning you about that.

In React-Redux v5, passing the store directly as a prop to a connected component allowed, and there were rare occasions when it was useful, but in v6 that has been removed.

Please see my post Idiomatic Redux: The History and Implementation of React-Redux for some details on why that part of the API was removed.

Also, note that returning the entire Redux state object from a mapState is usually not a good idea, and if by some reason you do actually want to do that, you don't need to spread it - just return state. See the React-Redux docs section on writing mapState functions for some explanations.

回答2:

The problem lies on line 25 in ReduxProvider i.e.

<App store={this.store}>

This component is wrapped with Provider (which can and should accept the store as a prop) and the purpose of this is to make the store available to the rest of the application - so passing the store directly into child components isn't necessary.

To get access to the store, use the connect function to connect the component to the store and then mapStateToProps / mapDispatchToProps to access the state and/or dispatch actions.

More info