CODEWITHSUNDEEP
reactjsreact-nativereduxreact-redux
user2456752
user2456752

Reputation: 95

Could not find store in either the context or props of connect site redux error

I am trying to create something similar to todo app with react and redux from here.I have been reading all the solutions for this problem and nothing seems to be working for my case.

Most of the solutions purpose using Provider which I am already using. Any help is much appreciated.

Edit - Few import statement might be missing in snippets, but all components are being imported whenever needed and actions are also defined in action file.

Index.js

import App from './components/App'
import reducer from './reducers/index'

const store = createStore(reducer)

const AppWithStore = (
  <Provider store={store}>
    <App />
  </Provider>
)

ReactDOM.render(AppWithStore, document.getElementById('root'))

Update - Combined Reducer code 

import React from 'react'
import { combineReducers } from 'redux'

import TestReducer from './TestReducer'

export default combineReducers({
	TestReducer,
})

App.js

import Test from './Test';
class App extends Component {
  render() {
    return (
      <Test />
    );}
}

ReactDOM.render(
    (<App/>),
    document.getElementById("root")
);

export default App

Test.js contains both component and container

import { connect } from 'react-redux'
import { add } from '../actions'

const mapStateToProps = state => ({
  todos: state.todos,
})

class Test extends Component {
  dosomething() {
    const dispatch = this.props;
    dispatch(add("New Note"));
  }
  render() {
    return (
    <div>
      < button OnClick = { this.dosomething.bind(this)} > Test </button> 
      </div>
    )
  }
}

export default connect(mapStateToProps)(Test)

The reducer logic for Test is as given below 

import React from 'react';

const TestReducer = (state = [], action) => {
    const todos = state;
    const {type, payload} = action;

    switch(action.type){
        case 'ADD': {
            return {
                ...state,
                todos:"new todo"
            }
        }
    }
    return state;
}

export default TestReducer

Upvotes: 1

Views: 446

Answers (3)

Sumit Kumar
Sumit Kumar

Reputation: 580

You should remove 

ReactDOM.render(
    (<App/>),
    document.getElementById("root")
); from App.js file

When you call it again in App.js a new component instance independent of others is created, That's why it is not finding store.As store is not passed to it.

You can check it here https://codesandbox.io/s/vy7wwqw570. As i had remove render api call from app.js it is working now.

Upvotes: 2

Mohit Mutha
Mohit Mutha

Reputation: 3001

Try replacing todos: state.todos with todos: state.TestReducer.todos

import { connect } from 'react-redux'
import { add } from '../actions'

const mapStateToProps = state => ({
  //todos: state.todos,
  todos: state.TestReducer.todos
})

class Test extends Component {
  dosomething() {
    const dispatch = this.props;
    dispatch(add("New Note"));
  }
  render() {
    return (
    <div>
      < button OnClick = { this.dosomething.bind(this)} > Test </button> 
      </div>
    )
  }
}

export default connect(mapStateToProps)(Test)

Upvotes: 0

Utonium
Utonium

Reputation: 474

you need to import your reducers so that you

if your file name is TestReducer.js

import React from 'react';
export const TestReducer = (state = [], action) => {
  const todos = state;
  const {type, payload} = action;

  switch(action.type){
    case 'ADD': {
        return {
            ...state,
            todos:"new todo"
        }
    }
  }
  return state;
 }

then import it in this manner

import {TestReducer} from './TestReducer.js';
const store = createStore(TestReducer);

Upvotes: 0

Related Questions