Question

我使用Starter kit之一启动了react.js项目。我使用了一个Boilerplate structure。我试图了解React的实际流程 Redux Boilerplate。经过他们的结构后，我能够调用API并获得Component上的数据。以下是我根据结构学到的知识： -

一个。在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,
        }),
    }

d。在视图中我使用选择器来分隔索引

// 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;

所以，这是我从他们的教程得到的流程，我正在获取数据。但我想确保自己走上正轨？请告诉我这是正确的过程吗？

接下来我想从组件中调用一个方法，并希望在组件上接收响应，这样我就可以获取局部变量的数据了。任何人都可以给我一些教程或示例，所以我可以轻松学习。

Answer 1

如果您正在寻找生产就绪的样板， react-boilerplate是受欢迎的广告之一。

你似乎走在了正确的轨道上。反应样板guide中的此图可能有助于更好地理解流程。

React Redux Saga样板流

1 个答案: