Redux存储正在更新,但mapStateToProps中没有更新状态

时间:2019-05-11 11:14:45

标签: react-native redux react-redux

我有一个Redux存储,我正在从服务中进行更新。调度了一个动作。 store.getState()返回更新的状态,但在mapStateToProps()上显示初始状态。

尝试阅读描述故障排除的文档,但是没有运气。我正在添加卡住的代码示例。

有关SO的疑难解答指南和一些问题。 https://react-redux.js.org/troubleshooting https://redux.js.org/troubleshooting

我正在使用具有以下样板的Ignite2(https://github.com/infinitered/ignite

//index.js for reducers
//EDIT:
import { combineReducers } from 'redux'
import configureStore from './CreateStore'
import rootSaga from '../Sagas/'

/* ------------- Assemble The Reducers ------------- */
export const reducers = combineReducers({
  search: require('./SearchRedux').reducer,
  playerStateReducer: require('./PlayerStateReducer'),
})

export default () => {
  let { store, sagasManager, sagaMiddleware } = configureStore(reducers, rootSaga)
 return store
}
//service.js 
//using react-native-track-player
    TrackPlayer.addEventListener('playback-state', (data) => {

module.exports = async function(store, data) {
TrackPlayer.addEventListener('playback-state', (data) => {
    store.dispatch({ type: 'UPDATE_PLAYER_STATE', currentState: data.state })
    console.log(store.getState(), data, "store and data")
//gives me updated state from store
})
}


//PlayerStateReducer.js

export const reducer = (state = 0, action) => {
    if (action.type == 'UPDATE_PLAYER_STATE') {
        return action.currentState 
    } else {
        return state
    }
}
//PlayerUI.js
...
...
const mapStateToProps = (state) => {
    console.log(state.playerStateReducer, "player state")
    //This gives me the initial state i.e. 0 
    return {
        playerState: state.playerStateReducer
  }
}
export default connect(mapStateToProps)(PlayerUI)

我是React Native开发的新手。任何帮助将不胜感激。

非常感谢。

1 个答案:

答案 0 :(得分:0)

问题1

不需要.reducer

import playerStateReducer from './PlayerStateReducer';

export const reducers = combineReducers({
  playerStateReducer,
});

问题2

由于您要在redux动作中执行一个异步动作...您需要将redux-thunk中间件连接到redux存储中...并执行类似的操作

module.exports = (yourActionParam1, yourActionParam2) => async(dispatch) => {
    const payload = await someAsyncOp();
    dispatch({ type: 'UPDATE_PLAYER_STATE', payload });
};