为什么 reducer 的初始状态没有传递给连接的组件?
Why initial state from reducer is not passed to connected component?
因此,我正在尝试将 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 中的存储和数据对象时我得到了具体值。值得一提的是,reducer 被添加到 index.js combineReducer 函数中,因此它被读取,这不是问题。
这些是代码中最重要的部分:
- 减速器:
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};
}
}
}
- 初始状态:
export default {
/* User shortcuts store. */
userShortCutStore: userShortcutStore,
userShortCutData: []
}
- Index.js:
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>
);
- Header里面的ShortcutComponent,里面的ShortcutComponent
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);
const mapStateToProps = (state) => {
return {
userShortCutStore: state.usershortcuts.userShortCutStore,
userShortCutData: state.usershortcuts.userShortCutData
}
};
因此,我正在尝试将 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 中的存储和数据对象时我得到了具体值。值得一提的是,reducer 被添加到 index.js combineReducer 函数中,因此它被读取,这不是问题。
这些是代码中最重要的部分:
- 减速器:
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};
}
}
}
- 初始状态:
export default {
/* User shortcuts store. */
userShortCutStore: userShortcutStore,
userShortCutData: []
}
- Index.js:
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>
);
- Header里面的ShortcutComponent,里面的ShortcutComponent
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);
const mapStateToProps = (state) => {
return {
userShortCutStore: state.usershortcuts.userShortCutStore,
userShortCutData: state.usershortcuts.userShortCutData
}
};