5
respostas

Não consigo passar a store como parametro global com o <Provider> ***React****

Estou no curso de React (3) e na aula onde se passaria o valor da minha "store" como parametro global no Provider esta dando o seguinte erro:

TypeError: Cannot read property 'subscribe' of undefined

Debugando eu vi que a minha store nao e passada como variavel global para meus componentes....logo chega "undefined" e o metodo subscribe nao existe para uma store que esta indefinida.

Eu estou usando uma versao mais nova do React 16.7 e mesmo lendo a documentacao e vendo exemplos na internet nao consegui fazer funcionar.....por favor alguem poderia me ajudar com isso ?

segue meu codigo do projeto no github https://github.com/ErikGMatos/InstaAlura

5 respostas

Fala aí Estéfani, tudo bem? Bom vamos lá.

Na verdade você não irá acessar a store em si e pegar o valor dela diretamente no componente, o que você precisa fazer é configurar o mapStateToProps e mapDispatchToProps.

Eles serão os responsáveis em pegar o valor da sua store e mapear no componente.

Espero ter ajudado.

Sim...porem quando eu chego nessa parte ai de passar no context do React ele ja da o erro.....e eu ja fiz a outra parte do curso que aplica o mapeamento mapStateToProps e mapDispatchToProps, porem o erro persiste no mesmo lugar......a store continua undefined.....olhando no console eu recebo o seguinte erro

index.js:1446 Warning: App defines an invalid contextType. contextType should point to the Context object returned by React.createContext(). Did you accidentally pass the Context.Provider instead?

Precisaria ver os códigos Estéfani, consegue compartilhá-los?

Fico no aguardo.

Eu tenho um exemplo feito com React ^16.6.3"

Meu arquivo APP

import React from "react";
import { Provider } from "react-redux";
import "./App.css";
import store from "./store";
import TodoList from "./Todolist";
const App = () => (
  <Provider store={store}>
    <TodoList />
  </Provider>
);

Meu arquivo store

import { createStore, compose, applyMiddleware } from "redux";
import reducers from "./reducers";
const store = createStore(reducers); //Importando todos os reducers
export default store;

Meu arquivo reducer (index)

import { combineReducers } from "redux";
import todos from "./todos";
export default combineReducers({
  todos
});

Um dos meus reducers (todos)

//Criar o state inicial
const INITIAL_STATE = [
  { id: 1, text: "Fazer café" },
  { id: 2, text: "Estudar React" },
  { id: 3, text: "Participar do Forum da Alura" }
];

//Todo reducer é uma function
//Todos os reducers escutam todas as actions
export default function todos(state = INITIAL_STATE, action) {
  //state antes da alteracao
  //action - comando e valor disparados pela aplicacao
  switch (action.type) {
    case "ADD_TODO":
      return [...state, { id: Math.random(), text: action.payload.text }]; //O estado é imutavel, tem que criar de novo
    case "REMOVE_TODO":
      return state.filter(todo => todo.id !== action.payload.id);
    default:
      return state;
  }
}

Faltou o código do componente onde está injetando os dados da store. Acredito que seja o TodoList.

Fico no aguardo.