Как позвонить в диспетчерскую без использования магазина - PullRequest
1 голос
/ 09 апреля 2020

Я новичок в Redux, что было бы правильным способом сделать это

Я знаю, что мне следует использовать средний слой, но я не очень ясно понимаю концепцию


import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { Switch, Route, BrowserRouter } from 'react-router-dom';
import environment from '../../commons/enviroment.const';
import Loader from '../loader/Loader';

import store from '../../store/store';
import { routes as routesConst, context } from '../../commons/routes/routes.const';

import MandateConsulting from '../mandate-consulting/MandateConsulting';
import { doResetStore } from '../../store/config/actions/actions';

class App extends Component {

  componentWillMount(){
    store.dispatch(doResetStore());
  }

  render() {
    return (
      <Provider store={store}>
        <BrowserRouter basename={context()}>
            <div id={environment.appName} className="ui-kit-reset">
              <Loader />
              <Switch>
                <Route exact path={routesConst.etd} component={MandateConsulting} />
                <Route exact path={routesConst.default} component={MandateConsulting} />
              </Switch>
            </div>
        </BrowserRouter>
      </Provider>
    );
  }
}

export default App;

ДЕЙСТВИЕ

это действие, которое должно быть выполнено до всего

const doResetStore = () => {
    return (dispatch) => {
        dispatch({ type: RESET });
    };
};

export {
    doResetStore
};

Ответы [ 2 ]

1 голос
/ 09 апреля 2020

магазин - это место, где вы храните свои данные. Компоненты подключатся к хранилищу, чтобы получить необходимые данные.

вы подключаете хранилище через

import { connect } from "react-redux";

, соединяющееся с хранилищем или предоставляющее хранилище компонентам - это работа response-redux. скажем, у вас есть ваш компонент

 class MyComponent {

  }

вы подключаетесь к магазину следующим образом:

enter code here экспорт по умолчанию connect () (MyComponent)

Как только ваш компонент подключенный к магазину, способ отправки добавлен в список реквизитов вашего компонента.

Вы используете 'dispatch' для смены магазина, вы можете думать, что это this.setState(). с dispatch () вы отправляете сообщение внутри объекта в хранилище и говорите хранилищу изменить себя в зависимости от отправленного вами сообщения.

Действие doResetStore, которое вы определили выше, отправит это действие в хранилище, это действие будет go через определенные вами редукторы, редукторы увидят, что вы отправили type:RESET. Редукторы уже знают, что делать, основываясь на свойстве «type». Как только редуктор увидит «type: RESET», он изменит хранилище так, как вы сказали.

Вы должны хранить свои действия в каталоге / src / actions Затем импортируйте их внутри компонентов и передайте в dispatch () в качестве аргумента.

0 голосов
/ 09 апреля 2020

Вам нужен контейнер, который отображает DispatchToProps.

https://react-redux.js.org/using-react-redux/connect-mapdispatch

Создайте файл, который импортирует ваш компонент, и сопоставьте ваши действия с вашими реквизитами. Тогда вы сможете использовать его без магазина.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...