NextJS redux-saga State not updating - reactjs

Question

I'm trying to get data in nextjs with redux-saga. But my data wont show, then i debug in every file, and finally found that the data is successfully fetched but, the state wont updated. I've been follow the docs and dont know which part that caused the issue. Thanks for any help
Default State
{
status: 'init',
data: [],
error: null,
}
Saga
export function* getCars() {
try {
const options = {
url: `http://localhost/some-endpoint`,
method: 'GET',
}
yield put({
type: ACTION_TYPES.CARS.LOAD,
});
const response = call(axios, options);
if (response.data) {
const { data, status } = response;
yield put({
type: ACTION_TYPES.CARS.RES,
payload: { data, status },
});
} else {
yield put({
type: ACTION_TYPES.CARS.ERR,
error: response.status,
});
}
} catch (err) {
yield put({
type: ACTION_TYPES.CARS.ERR,
error: err,
});
}
}
export default function* combineSaga() {
yield takeEvery(ACTION_TYPES.CARS.GET, getCars);
}
Reducer
const defaultState = DEFAULT_STATE.CARS;
function reducer(state = defaultState, action) {
switch (action.type) {
case ACTION_TYPES.CARS.LOAD:
return {
...state,
status: 'loading',
};
case ACTION_TYPES.CARS.RES:
return {
...state,
data: action.payload.data,
status: 'success',
};
case ACTION_TYPES.CARS.ERR:
return {
...state,
status: 'error',
error: action.error,
};
default:
return state;
}
}
export default reducer;
Store Configuration
const makeStore = () => {
const sagaMiddleware = createSagaMiddleware()
const store = createStore(
rootReducer,
applyMiddleware(sagaMiddleware),
)
store.sagaTask = sagaMiddleware.run(rootSaga)
return store
}
export default createWrapper(makeStore);
App.js
function MyApp({ Component, pageProps }) {
return (
<div>
<Component {...pageProps} />
</div>
);
}
MyApp.getInitialProps = async appContext => {
const { Component, ctx } = appContext;
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
}
export default wrapper.withRedux(withReduxSaga(MyApp));
Index.js
function Home({ storeCars }) {
useEffect(() => {
//always show default state
console.log(storeCars);
}, [storeCars.status]);
return <div>Home</div>;
}
Home.getInitialProps = async props => {
const { store } = props;
store.dispatch({
type: ACTION_TYPES.CARS.GET,
payload: {},
});
return {};
}
export default connect(state => state)(Home);

Answer 1

you need 2 actions
getDataFromServer to be used in Home component
setDataToRedux to be used in saga and action type in reducer