代码之家  ›  专栏  ›  技术社区  ›  tatsu

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

  •  0
  • tatsu  · 技术社区  · 7 年前

    万岁,我的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作为一个单独的文件))应用程序设置。

    这是我的模板。jsx减速器:

    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 回复  |  直到 7 年前
        1
  •  1
  •   goto-bus-stop    7 年前
        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)