如何将变量从操作传递到组件

时间:2017-09-12 10:18:59

标签: reactjs object action

万岁我在我的行动中登录了我的API答案控制台:

function listTemplates(specs) {
    const payload = templateList.post(specs);
    return dispatch => dispatch({ ...types.GET_TEMPLATES, payload });
}

function apiResponse(response) {
    const res = response;
    console.log(res);
}

const actions = {
    listTemplates,
    apiResponse,
};

等等,但如何将其发送到我的组件进行处理和显示?

更新:

我在本指南的末尾稍作介绍:http://redux.js.org/docs/basics/UsageWithReact.html#implementing-container-components

并将其改编为我的(更完整(applyMiddleware + Store.jsx作为单独的文件))应用程序设置。

所以我到处都没有商店。

这是我的GetTemplate.jsx Reducer:

import EventTypes from '../EventTypes';
import actions from '../../Components/Menu/actions';

const initialState = {
    templates: [],
};

export default (state = initialState, action) => {
    switch (action.type) {
        case EventTypes.GET_TEMPLATES_FULFILLED.type:
            const returnValue = action.payload.body().data();
            actions.apiResponse(returnValue);
            return state;
        default:
            return state;
    }
};
我错过了什么?我真的不明白这一切是如何运作的。

我的模板列表组件需要什么?

1 个答案:

答案 0 :(得分:1)

    case EventTypes.GET_TEMPLATES_FULFILLED.type:
        const returnValue = action.payload.body().data();
        actions.apiResponse(returnValue); // ← ←
        return state;

Redux reducer应返回新状态,而不是调用其他操作。使用类似的东西:

return Object.assign({}, state, { templates: returnValue })

现在Redux会将该数据保存在其商店中。然后,使用connect function from react-redux,您可以从商店中选择该数据并在组件中使用它。

function mapStateToProps (state) {
  return { templates: state.templates }
}
export default connect(mapStateToProps)(TemplatesComponent)