CODEWITHSUNDEEP
javascriptreactjsredux
dropWizard
dropWizard

Reputation: 3538

Using mapStateToProps in Redux

I am trying to get a simple example to work. Here is the code below.

In this example, in:

mapStateToProps = (state) => {}

where is state coming from? I am little confused as to what exactly I am passing into?

I understand that connect(mapStateToProps)(TodoApp) "binds" the state returned in mapStateToProps to TodoApp and can then be accessed via this.props.

What do I need to do to this code so I can print out the current state inside TodoApp

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { connect } from 'react-redux'
import { createStore } from 'redux'
import { combineReducers } from 'redux'


const stateObject = [
    {
        'id': 1,
        'name': 'eric'
    },
    {
        'id': 2,
        'name': 'john'
    }
]

const todo = (state, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return {
                id: action.id,
                text: action.text
            }
        default:
            return state
    }
}


const todos = (state = stateObject, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return [
                ...state,
                todo(undefined, action)
            ];
        default:
            return state
    }
}



const store = createStore(todos)

//confused by what is happening here
const mapStateToProps = (state) => {
    return {
        ?: ?
    }
}

const TodoApp = () => {
    //How do I get this to print out the current props?
    console.log(this.props)
    return (
        <div>
            Some Text
        </div>
    )
}

connect(mapStateToProps)(TodoApp)


ReactDOM.render(
    <Provider store={store} >
        <TodoApp />
    </Provider>,
    document.getElementById('root')
)

Ok updated:

const mapStateToProps = (state) => {
    return {
        names: state
    }
}

const TodoApp = () => {
    console.log(this.props)
    return (
        <div>
            Some Text1
        </div>
    )
}

const ConnectedComponent = connect(mapStateToProps)(TodoApp);


ReactDOM.render(
    <Provider store={store} >
        <ConnectedComponent />
    </Provider>,
    document.getElementById('root')
)

However I'm still getting undefined for console.log(this.props).

What am I doing wrong?

Upvotes: 0

Views: 165

Answers (2)

DonovanM
DonovanM

Reputation: 1198

There's no this with a functional component. To access the props you can change it to this:

const TodoApp = (props) => {
    console.log(props)
    return (
        <div>
            Some Text1
        </div>
    )
}

Upvotes: 1

guitarino
guitarino

Reputation: 366

mapStateToProps maps the some parts of your Redux state to props of your React Component.

State comes from your store. In fact, you can take a look at your current state at any point by calling store.getState(). When you do createStore(todos), this creates the state based on the todos reducer. As you can see in your todos reducer, your initial state comes from stateObject, which is defined up top.

So, back to mapStateToProps. All you need to do in that functions is to return the object, where keys will be the props and values will be the values obtained from the Redux state. Here's an example of mapStateToProps:

const mapStateToProps = function (state) {
    return {
        propName: state
    }
}

Now when you do the console.log(this.props) inside render(), you can see the whole state being stored inside this.props.propName. That is achieved by mapStateToProps.

A little bit of theory on this: each time an action is dispatched, every mapStateToProps you have in your app is called, props are applied to every component you created, and if any props have changed, that component will re-render. This kind of behaviour is provided for you via connect function. So you don't have to implement this behaviour for every component: all you need to do is to apply it like so: const ConnectedComponent = connect(mapStateToProps)(SomeComponent) and use ConnectedComponent instead of SomeComponent.

Upvotes: 1

Related Questions