3

Don't know what the problem, i have tried everything. this issue is closest to mine, but it not helped me https://github.com/reduxjs/redux/issues/585 Reducer

export default (state = [], action: any) => {
    switch (action.type) {
        case "GET_ALL":
            return [...action.sections];
        case "ADD_ONE":
            return [...state, action.section];
        case "REMOVE":
            return state.filter((section: Section) => section.id !== action.id);
        default:
            return [...state]
    }
}

Action Creator

export function loadAll(id: number) {
    return function(dispatch: Dispatch) {
        return fetch(`http://localhost:4000/test`, {  
                method: 'GET',
            })
            .then((response: any) => response.json())
            .then((sections: Section[]) => {
                dispatch({
                    type: "GET_ALL",
                    sections
                });
            },
            err => {
                 throw new Error("Network error");
            }
        );
    } }

Application Bootstrap

const composedEnhancers = compose(
    applyMiddleware(thunk, routerMiddleware(history)),
);

const store = createStore(
    connectRouter(history)(combineReducers({
            sections: sectionReducer, 
        })),
    initialState, //is equal to {}
    composedEnhancers
);

    const target = document.querySelector('#root');

    render(
        <Provider store={store}>
            <ConnectedRouter history={history}>
          <div>
            <main className="appContent">
                <Route exact={true} path="/" component={TestPage} />  
            </main>
          </div>
            </ConnectedRouter>
        </Provider>,
        target
    );

Component connection - here in my props i receive old data, until i go to next page and return back

 const mapDispatchToProps = (dispatch: Dispatch, props: any) => {
    return {
        saveSection: (section: Section) => dispatch(saveSection(section) as any),
        loadAll: (id: number) => dispatch(loadAll(id) as any),
        removeSection: (sectionId: number) => dispatch(removeSection(sectionId) as any),
    }
}
const mapStateToProps = ((state: any, ownProps: any) => (() => {
return {
    sections: state.sections || [],
}
}));

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(TestPage)
Matt Stobbs
  • 611
  • 2
  • 8
  • 21
  • 1
    It seems like you're returning a callback function in mapStateToProps? Try change it to: const mapStateToProps = (state: any, ownProps: any) => { return { sections: state.sections || [], } } – Stephan Olsen Aug 08 '18 at 19:52
  • @StephanOlsen OMG, thank u bro ) – Bakhodur Kandikov Aug 08 '18 at 19:57
  • Also, note that you can use a simpler form of `mapDispatch`. Just put all the action creators in an object, and pass that to `connect`, like: `const mapDispatch = {saveSection, loadAll, removeSection}`. – markerikson Aug 08 '18 at 20:01
  • 2
    While we're at it, the default case on your switch statement in the reducer should just return state. By returning [...state], you're causing an unnecessary rerender of the application, since no props are being changed. – Stephan Olsen Aug 08 '18 at 20:05
  • 1
    thanks for response @markerikson, yeah i need a some refactoring ) – Bakhodur Kandikov Aug 08 '18 at 20:06
  • @StephanOlsen yes, it was for testing, i will change it – Bakhodur Kandikov Aug 08 '18 at 20:08
  • 1
    I am having this exact issue- mapStateToProps shows old state yet redux dev tools shows that it is the new state... for some reason I have to refresh the page in order to see the correct state. – Jim Mar 26 '20 at 19:22

0 Answers0