React Redux Saga - стандартный поток - PullRequest
Новая
       12

React Redux Saga - стандартный поток

0 голосов
/ 03 мая 2018

Я запустил свой реагирующий проект, используя один из Starter kit . Я использовал одну структуру Boilerplate . Я пытаюсь узнать фактический поток React Redux Boilerplate. После ознакомления с их структурой я могу вызвать API и получить данные о компонентах. Вот поток, который я узнал по структуре: -

а. В componentDidMount я вызвал метод Mudules для создания Action. 

 // On view
 componentDidMount() {
     this.props.getCampaignTopics(1);
 }

 //On Modules
 export const getCampaignTopics = createAction(GET_CAMPAIGN_TOPICS, (id : string) => ({id}));

б. В саге, когда действие было запущено, я вызываю конечную точку API для получения данных 

// On Saga
export function* getCampaignTopics(actions) {
   let id=0;
   if(actions.payload.id)
   {
       id= actions.payload.id;
   }
   const responsetype = yield call(() => fetch(__CONFIG__.api_url+'topic/' + id,{method:'GET',data:{}}).then(response => response.json()))

  yield put(addcampaignActions.setCampaignTopics(responsetype.data));
  }


function* watchGetHome() {
   yield takeLatest(addcampaignConstants.GET_CAMPAIGN_TOPICS, getCampaignTopics);
}

с. После получения данных я вызываю другой метод модулей для установки данных 

export const setCampaignTopics = createAction(SET_CAMPAIGN_TOPICS, (topics : any) => ({topics}));

export const reducers = {
   [GET_CAMPAIGN_TOPICS]: (state, { payload }) =>
    state.merge({
      ...payload,
    }),
      [SET_CAMPAIGN_TOPICS]: (state, { payload }) =>
        state.merge({
          ...payload,
        }),
    }

д. В представлении я использую селектор для разделения индексов 

// Selector
const addcampaignDataSelector = state => state.addcampaign;

const topicSelector = createSelector(
  addcampaignDataSelector,
  payload => payload.get('topics')
);

export const addcampaignSelector = state => ({
  topics: topicSelector(state)
});

е. В компоненте я получаю значение на реквизит 

// render on Component
const { addcampaign } = this.props;     
topics = addcampaign.topics.toJS().children;

Итак, это поток, который я получил из их урока, и я получаю данные. Но я хочу убедиться, что я на правильном пути или нет? Скажите, пожалуйста, это правильный процесс или нет?

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

1 Ответ

0 голосов
/ 08 мая 2018

Если вы ищете готовый образец для производства, реактор-образец - один из популярных.

Вы, кажется, на правильном пути. Эта схема из справочника реактора может помочь лучше понять поток. enter image description here

...