为什么reducer的初始状态没有传递给连接组件?

时间:2018-04-13 11:49:31

标签: javascript reactjs redux react-redux extreact

所以,我试图将ExtReact中的商店解析为Reducer中的一个组件(遵循这些说明:http://docs.sencha.com/extreact/6.5.0/guides/extreact_stores_in_flux.html#extreact_stores_in_flux_-_option_1__in_the_redux_store)。但似乎,我无法通过reducer传递一个状态(即我正在为存储和数据传递未定义的状态),即使我在减速器中使用consol.log存储和数据对象时获得具体值。要提一下,reducer被添加到index.js combineReducer函数中,因此它被读取并且不是问题。

所以这些是代码中最重要的部分:

  1. 减速机:
  2. export function usershortcuts(state = initialState, action){
        switch(action.type){
            case types.USER_SHORTCUT_FETCH_DATA_SUCCESS:{
                console.log("User shortcut store = state.userShortCutStore); // I am getting a concrete result
                state.userShortCutData = state.userShortCutStore.getData();
                console.log("User shortcut data = " + state.userShortCutData); //I am getting a concrete result
                return{...state};
            }
            default:{
                console.log(state.userShortCutStore);
                return {...state};
            }
        }
    }
    
    1. 初始状态:
    2. export default {
          /* User shortcuts store. */
          userShortCutStore: userShortcutStore,
      
          userShortCutData: []
      }
      
      1. Index.js:
      2. const store = configureStore();
        
        store.dispatch(usershortcutFetchDataThroughStore());
        
        launch(
          <Provider store = {store}>
              <HashRouter>
                <Switch>
        
                 {/* <Route path="/" name="Home" component={TextEditor}/>*/}
                  <Route path="/" name="Home" component={Full}/>
                </Switch>
              </HashRouter>
          </Provider>
        );
        
        1. ShortcutComponent位于Header里面,位于
        2. 里面
          class ShortcutComponent extends Component{
          
              constructor(props){
                  super(props);
                  this.state={
                      userShortCutStore: null,
                      userShortCutData: []
                  }
              }
          
              componentDidMount(){
                  this.setState({
                      userShortCutStore: this.props.userShortCutStore,
                      userShortCutData: this.props.userShortCutData
                  })
              }
          
              render(){
                  const userShortCutStore = this.state.userShortCutStore;
                  const userShortCutData = this.state.userShortCutData;
                  console.log("Store = " + userShortCutStore); //undefined
                  console.log("User shortcut data = " + userShortCutData); //undefined
                  return(
                   /* .... */
                  )
              }
          }
          
          
          const mapStateToProps = (state) => {
              return { 
                  userShortCutStore: state.userShortCutStore,
                  userShortCutData: state.userShortCutData
              }
          };
          
          export default connect(mapStateToProps) (ShortcutComponent);
          

1 个答案:

答案 0 :(得分:2)

const mapStateToProps = (state) => {
    return { 
        userShortCutStore: state.usershortcuts.userShortCutStore,
        userShortCutData: state.usershortcuts.userShortCutData
    }
};