problems with connecting a child component with the store in react-redux app

Question

am working on react app for the first time and learn about redux. the problem I define a store in App.js and pass it to application using Provider bu when I try to access it to a child component I have an undefined in my console after map it with mapStateToProps. please can you check my code and tell me what am doing wrong?

I create a 2 reducers in folders reducers call index.js and testIt.js after that I import testIt.js in index.js which have a combineReducers to add feature reducers. after i export it for the App.js and Provide the store using the provider of react-redux.

App.js


import React, { Component } from 'react';
import {BrowserRouter , Route} from "react-router-dom";
import { Provider } from 'react-redux';
import Store from "./reducers/index";
import { TestIt } from "./components/TestIt";

import './App.css';

//console.log(Store.getState());

class App extends Component {

  render() {
    return (
      
      <div className="App">
        <Provider store={Store}>
        <BrowserRouter>
          <Route exact path="/login" component={TestIt} />
        </BrowserRouter>
        </Provider>
      </div>
      
    );
  }
}

export default App;

reducers/index.js

import { combineReducers, createStore } from 'redux';
import notes from "./testIt";

const leadApp = combineReducers({
  notes
})

export default createStore(leadApp);

reducers/testIt.js

test .js

const initialState = [
    {text: "Write code!"}
  ];
  
  
  export default function notes(state=initialState, action) {
    switch (action.type) {
      default:
        return state;
    }
  }

finally my sub-component src/components/TestIt.js

import React, { Component } from 'react';
import {connect} from 'react-redux';


export class TestIt extends Component {
  
  constructor(props){
    super(props)
  }

  
  render() {
    console.log(this.props.notes)
    return (
      <div>
        <h2>Welcome to TestIt!</h2>
        <hr />
        <h3>Notes</h3>
        <table>
          <tbody>
            {this.props.notes.map(note => (
              <tr>
                <td>{note.text}</td>
                <td><button>edit</button></td>
                <td><button>delete</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    )
  }
}


const mapStateToProps = (state) => {
  return notes : state.notes
}

// const mapDispatchToProps = dispatch => {
//   return {
//   }
// }


export default connect(mapStateToProps)(TestIt);

I have now this.props.notes give me undefined of the reducers testIt.j .I suspect something on the store I pass to to the provider does not reach the sub-component even if i do the connection with the method connect(). I expect to access to the testIt.js reducers in my sub component.

Please really need help I try and read to much articles and documentations.

Shalini Sentiya Shalini Sentiya · Accepted Answer · 2019-01-16T07:19:19

const mapStateToProps = (state) => {
  return notes : state.notes
}

not getting the value in state.notes because you are assigning the state in notes.state

Your code:-

switch (action.type) {
  default:
    return state;
}

so you will get the value in state.notes.state

If you want to change state property then you can change the code:-

export default function notes(state=initialState, action) {
    switch (action.type) {
      default:
        return {data:state};
    }
  }

sub-component src/components/TestIt.js

const mapStateToProps = (state) => {
  return notes : state.notes.data
}

but this is not a good solution because this reducers not having any action type, so it will execute every time.

problems with connecting a child component with the store in react-redux app

2 Answers