redux getState（）不返回更新的状态 [英] redux getState() doesn't return the updated state

问题描述

让我陷入困境的问题是，虽然我的redux devtool显示成功的状态更新没有任何类型的突变和成功的View组件重新渲染，但是当我调用getState（）它总是返回初始状态并且没有'关心更新状态！任何知道可能造成这种情况的人都会帮助我。

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.

我使用react-redux和redux-thunk

I use react-redux and redux-thunk

action.js

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

reducer.js

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

Page01.js

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);

推荐答案

为了使用 getState （）在动作文件中，您需要直接在商店中使用它，而不是在使用 redux-thunk <时，您可以将它作为内部函数的第二个参数以及调度/ code>

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())
  };
}

自从redux发出行动后，您的更新状态也不会立即显示-state更新异步发生。您应该在使用该状态的组件的 componentDidUpdate 函数中进行检查。

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.

此外，在为了使用 store.getState（）获取更新状态，您需要订阅状态更改，如

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())
)

您可以取消订阅致电

unsubscribe()

您可以阅读更多相关信息 这里

You may read more about it here

但是当你使用连接时，你不能需要在组件中使用 store.getState（），可以使用 mapStateToProps 函数来获取状态价值观。

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.

这篇关于redux getState（）不返回更新的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！