Passing Redux store in props

Question

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.

Answer 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.

Answer 2

React Redux 7.0.1 allows passing store as a Prop again.

From the release notes:

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.

Answer 3

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