redux getState() doesn't return the updated state

Question

The problem that made me stuck for days is that although my redux devtool shows the successful state update without any kind of mutation and with successful View component rerender, but when I call getState() it always return the initial state and doesn't care about updated state! anyone who knows what could make this kind of situation pls help me.

I use react-redux and redux-thunk

action.js

export function test(data) {
  return {
    type: 'TEST',
    data
  };
}

export function testFunc(data) {
  return dispatch => {
    dispatch(test(data))
    console.log('GLOBAL STATE IS :', store.getState() )
  };
}

reducer.js

export default function peopleReducer(state = initialState, action) {
  switch (action.type) {
    case 'TEST':
      return {
        ...state,
        test: action.data
      }
    default:
      return state;
  }
}

Page01.js

componentDidUpdate(){
   console.log('get state = ', store.getState())
}

....

<TouchableHighlight 
   underlayColor={"#0e911b"}
   onPress={() => {
   this.props.testing('test contenttttt !!!!')            
    }}
 >
   <Text style={styles.title}>ACTION</Text>
</TouchableHighlight>



function mapStateToProps(state) {
  return {
    people: state.people,
    planets: state.planets,
    test: state.test
  };
}

function mapDispatchToProps(dispatch) {
  return { 
    getPeople: () => dispatch(getPeopleFromAPI()), 
    getPlanets: () => dispatch(getPlanetsFromAPI()), 
    testing: data => dispatch(testFunc(data)) };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

Solution

In order to use getState() in action file, you need to use it from store directly, rather you can get it as the second parameter to the inner function along with dispatch when using redux-thunk

export function testFunc(data) {
  return (dispatch, getState) => {
    dispatch(test(data))
    console.log('GLOBAL STATE IS :', getState())
  };
}

also your updated state will not be seen right after you dispatch the action since redux-state update happens asynchronously. You should rather check it in the componentDidUpdate function of the component where you are using the state.

Also, in order to get the updated state using store.getState() you need to subscribe to the state change like

// Every time the state changes, log it
// Note that subscribe() returns a function for unregistering the listener
const unsubscribe = store.subscribe(() =>
  console.log(store.getState())
)

and you can unsubscribe by calling

unsubscribe()

You may read more about it here

However when you use connect, you don't need to use store.getState() in the component, you can use mapStateToProps function to get the state values.

Comments

[mrxrinc]

Dude I tried componentDidUpdate too, but still the problem exists!

[mrxrinc]

unsubscribe() returns undefined. Where can I use it?

[Shubham Khatri]

you don't need to get its return value, also with react, you would not use store.subscribe but connect

[mrxrinc]

Thank you, u helped to figure out the right way. appreciating

[Shubham Khatri]

@MrxRinc , glad to have helped