Почему исходное состояние от редуктора не передается подключенному компоненту?
Итак, я пытаюсь проанализировать магазин из ExtReact в компонент из Reducer (следуя этим инструкциям: http://docs.sencha.com/extreact/6.5.0/guides/extreact_stores_in_flux.html). Но, похоже, я не могу передать состояние (т. Е. Я передаю неопределенное состояние для хранилища и данных) от редуктора, хотя когда я объединяю хранилище и объект данных в редукторе, я получаю конкретные значения. Отметим, что редуктор добавлен в функцию index.js combReducer, поэтому он читается, и это не проблема.
Итак, это самые важные части кода:
- Разбавление:
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>
);
- 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);
1 ответ
Решение
const mapStateToProps = (state) => {
return {
userShortCutStore: state.usershortcuts.userShortCutStore,
userShortCutData: state.usershortcuts.userShortCutData
}
};