Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Passing redux store in props has been removed and does not do anything.

Bom dia estou com problemas para rodar o projeto.

Aparece a seguinte mensagem: 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: . You may also pass a {context : MyContext} option to connect.

Acredito que vocês deveriam atualizar o curso, pois as libs utilizadas estão ultrapassadas e com isso tive diversos problemas para chegar até aqui.

Fico no aguardo dessa ajuda. Abraços

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Login from './components/Login';
import Logout from './components/Logout';

import './assets/css/reset.css';  
import './assets/css/timeline.css';  
import './assets/css/login.css';  

import {Router,Route,browserHistory} from 'react-router';
import {matchPattern} from 'react-router/lib/PatternUtils';

import * as serviceWorker from './serviceWorker';
// REACT REDUX
import {Provider} from 'react-redux';

import { Store } from './store';

// console.log(Store);


function verificarAutenticacao(nextState,replace) {
    let resultado = matchPattern('/timeline(/:login)',nextState.location.pathname);
    let enderecoPrivado = (resultado.paramValues[0] ? true : false);
    // console.log(enderecoPrivado);


    // console.log(resultado);

    if(localStorage.getItem('auth-token') === null && !enderecoPrivado  ) {
        replace("/?msg=você precisa está logado para acessar o endereço");
    }
}

ReactDOM.render(
    (
        <Provider store={Store} >
            <Router history={browserHistory}>
                <Route path="/" component={Login}/>
                <Route path="/timeline(/:login)" component={App} onEnter={verificarAutenticacao} />
                <Route path="/logout" component={Logout} />
            </Router>
        </Provider>
    )
    , document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

app.js

import React, { Component } from 'react';
import Header from './components/Header';
import Timeline from './components/TimeLine';

import { connect } from 'react-redux';

import PropTypes from 'prop-types';


class App extends Component {

  render() {
        // const store = this.props.store;
        console.log(this.props);
        // console.log(store);
    return (
        <div className="App">
            <div id="root">
                <div className="main">

                    <Header store={this.props.store} />

                    <Timeline login={this.props.params.login} store={this.props.store} />

                 </div>
            </div>
        </div>
    );
  }
}

// App.contextTypes = {
//     store : PropTypes.object.isRequired
// }

const mapStateToProps = state => {
    return {
            store : state
    }
}

const AppContainer = connect(mapStateToProps)(App);

export default AppContainer;

package.json

{
  "name": "instalura",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "immutable": "^4.0.0-rc.12",
    "prop-types": "^15.6.2",
    "pubsub-js": "^1.7.0",
    "react": "^16.7.0",
    "react-addons-css-transition-group": "^15.6.2",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-router": "^3.2.0",
    "react-scripts": "2.1.3",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Os demais códigos estão em : https://gist.github.com/rafaelduim/2ec3c3b957b4f0350cc2a420e6283a17

2 respostas
solução!

Pela mensagem do erro, me parece que o problema está aqui:

const mapStateToProps = state => {
    return {
            store : state
    }
}

Tente altera para:

const mapStateToProps = state => {
    return {
            store : state.nome_do_seu_reducer
    }
}

Desta forma você não passa todos os estados de todos os reducers, apenas o estado que você precisa.

Aqui tem um link descrevendo as últimas alterações feitas no Redux:

https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/#v6-0

Funcionou sim...

Obrigado.

const mapStateToProps = state => {
    return {
            notificacao : state.notificacao,
            timeline : state.timeline
    }
}

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software