I am using the rematch / core library for the first time, a successful request for the internal url is made, but the data from the date is not written to the state, I cannot understand why, please help!
Interestingly, with similar code in the navigation model, I get data that is written to the state
navigation.ts
import { ModelConfig } from '@rematch/core';
import { NavigationItem } from '@vostok/template';
import axios from 'axios';
export const navigation: ModelConfig<NavigationItem[]> = {
state: [],
reducers: {
get_fulfilled(__, payload: NavigationItem[]) {
console.log('nav-reducer', payload);
return payload;
},
},
effects: {
async get_request() {
const res = await axios.get('https://platform.vostok-electra.ru/api/appconfig/navs');
console.log("nav", res.data);
console.log(navigation);
return res.data;
},
},
selectors: (state) => ({
list: () => state,
}),
};
proceedeing.ts
import { ModelConfig } from '@rematch/core';
import axios from 'axios';
import moment, { Moment } from 'moment';
export const proceedings: ModelConfig<Models.Proceedings[]> = {
state: [],
reducers: {
get_fulfilled(__, payload: Models.Proceedings[]) {
console.log("prosto", payload);
return payload;
},
},
effects: () => ({
async get_users() {
const res = await axios.get('dict/User/List');
console.log(res.data);
return res.data;
},
}),
selectors: (state) => ({
list: () => state,
})
};
app.tsx
export default function App() {
return (
<StoreProvider store={store}>
<Router>
<Main />
</Router>
</StoreProvider>
);
}
function Main() {
const user = useUser();
const navigation = useSelector(select.navigation.list);
const [isLoading, loadingErrors] = useLoading('navigation/get');
useEffect(() => {
dispatch.navigation.get_request();
}, []);
return (
<Layout
appName="Табель судебных заседаний"
isLoading={isLoading}
loadingErrors={loadingErrors}
navigation={navigation}
user={user}
onLogout={() => userManager.signoutRedirect()}
>
<RouteSwitcher
navigation={navigation}
defaultRedirect="/proceedings"
routes={[
{ exact: true, path: '/proceedings', component: PageProceedings },
{ exact: true, path: '/dataset', component: PageDataSet },
]}
/>
</Layout>
);
}
store.ts
import { init } from '@rematch/core';
import { reducer as oidcReducer, UserState } from 'redux-oidc';
import { useSelector } from 'react-redux';
import loadingPlugin from '@vostok/rematch-loading';
import selectPlugin from '@rematch/select';
import * as models from './models';
const store = init({
redux: {
reducers: { oidc: oidcReducer },
},
models,
plugins: [
loadingPlugin({
checkError: ({ status }) => status === 'error',
getError: ({ errors }) => {
if (!errors) return null;
return errors.map(err => {
if (typeof err === 'string') return err;
return `[${err.code}] ${err.error}`;
});
},
getResult: ({ response, items }) => response ?? items ?? null,
}),
selectPlugin(),
],
});
export default store;
export const { dispatch, select } = store;
export { useSelector } from 'react-redux';
export { useLoading } from '@vostok/rematch-loading';
export const useUser = () => (
useSelector(({ oidc }: { oidc: UserState }) => oidc?.user?.profile ?? {})
);
Effects that return data doesn't include that information on the state, you MUST use the dispatch method, or this.(reducerName) to pass the payload parameter filled with the effect data.
To understand i take your example:
Reducers are not executed if you don't execute them =)