the state in rematch/core is not recorded

523 Views Asked by At

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 ?? {})
);
1

There are 1 best solutions below

0
On

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: {
    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);
      // or effects:(dispatch) => dispatch.model-name.reducername() 
      this.get_fulfilled(res.data);
    },
  },

Reducers are not executed if you don't execute them =)