Question

我知道你们可能会认为这个问题是重复的，但是经过所有检查之后，我发现没有人像我这样做需求，因此我决定在这里提出一个问题。

我有一个连接到两个redux减速器的组件，reducer1用于获取数据并显示在表中。 ruducer2将发布数据，这有助于我从由reducer1生成的表中编辑特定用户。

代码

reducer1

export default (state = {
error: null,
users: [],
}, action) => {
  switch (action.type) {
  case reducer_1_SUCCESS:
    console.log("success");
    return {
        users: action.payload
    }
    break;
    case reducer_1_TIMEOUT:
    return {
        error: SESSION_TIMEOUT
    }
    break;
    default:
    return state;
  }
};

reducer2

export default (state = { error: "", success: "", isSnackbarError: false }, action) => {
switch (action.type) {
    case reducer_2_ERROR:
        console.log("reducer_2_ERROR");
        return {
            error: action.payload,
            success: state.success,
            isSnackbarError: true
        };
    case reducer_2_SUCCESS:
        console.log("reducer_2_SUCCESS");
        return {
            error: "haha",
            success: action.payload,
            isSnackbarError: false
        };
    default:
        return state;
    }
};

将redux与组件连接

 let SignInWithStyles = withStyles(styles)(EnhancedTable);   

  SignInWithStyles = reduxForm({
     validate,
      form: "reducer2From"
  })(SignInWithStyles);

const mapStateToProps = ({ reducer1, reducer2 }) => {
    return {
        reducer1,
        reducer2 
    };
 };

export default connect(
    mapStateToProps,
    { reducer1, reducer2 }
)(SignInWithStyles);

在我的组件中

 async componentWillMount() {
        await this.props.reducer1();
    }

     <div>
                <Modal
                    aria-labelledby="simple-modal-title"
                    aria-describedby="simple-modal-description"
                    open={this.state.open}
                    onClose={this.handleClose}
                >
                    <div style={getModalStyle()} className={classes.paper}>
                        <Typography variant="title" id="modal-title">
                            Register Package { this.state.username }
                        </Typography>
                        <Typography variant="subheading" id="simple-modal-description">
                            <Paper>
                                <form
                                    className={classes.container}
                                    onSubmit={this.props.handleSubmit(this._handleSubmit)}
                                >
                                    <Field
                                        name="description"
                                        type="text"
                                        id="description"
                                        label="Description"
                                    />
                                    </div>
                                    <Button
                                        className={classes.button}
                                        type="submit"
                                        variant="raised"
                                        color="primary"
                                    >
                                        Go to Reducer2
                                    </Button>
                                </form>
                            </Paper>
                        </Typography>
                    </div>
                </Modal>
            </div>

_handleSubmit = values => {
    this.handleClose();
    this.props.reducer2(values, this.props.history);
};

发送动作

export const reducer1 = () => async dispatch => {
    const query = //some query here;
    const res = await axios.post(
        API_URL,
        JSON.stringify(getBody(query))
     );
     const data = res.response;
    if (data.return[0].message === SESSION_TIMEOUT) {
         console.log("TIME OUT");
    } else {
        dispatch({
            type: reducer_1_SUCCESS,
            payload: data.return
        });
     }
};


export const reducer2= (user, history) => async dispatch => {
     const {
         description,
         expiryDay,
         packageList,
         type,
         id
     } = user;

     const query = `query{query here}`;
     const res = await axios.post(API_URL, JSON.stringify(getBody(query)));
     const data = res.return;
     try {
         if (data.return.action) {
             dispatch({
                 type: reducer_2_SUCCESS,
                 payload: "payload test"
             });
         } else {
             // registration fails
            dispatch({
                 type: reducer_2_ERROR,
                 payload: data.return.message
             });
         }
     } catch (error) {
         console.log(error);
     }
 };

单击表格中的“ INTO REDUCER 2”按钮后，会弹出同一组件的模态，使我可以进行编辑和提交。单击提交按钮后，Reducer2将执行。我确信减速器可以正常工作，因为控制台显示了我记录的内容。问题在于我的渲染器将不会重新渲染，因此我无法在道具中获取从reducer2返回的数据。

有人可以帮我吗？

Answer 1

减速器中的确定可以像这样合并您的值

减速器1

export default (state = {
error: null,
users: [],
}, action) => {
  switch (action.type) {
  case reducer_1_SUCCESS:
    console.log("success");
    return {
        ...state,
        users: action.payload
    }
    break;
    case reducer_1_TIMEOUT:
    return {
        ...state,
        error: SESSION_TIMEOUT
    }
    break;
    default:
    return state;
  }
};

减速器2

export default (state = { error: "", success: "", isSnackbarError: false }, action) => {
switch (action.type) {
    case reducer_2_ERROR:
        console.log("reducer_2_ERROR");
        return {
            ...state,
            error: action.payload,
            isSnackbarError: true
        };
    case reducer_2_SUCCESS:
        console.log("reducer_2_SUCCESS");
        return {
            ...state,
            error: "haha",
            success: action.payload,
            isSnackbarError: false
        };
    default:
        return state;
    }
};

有重命名

const mapStateToProps = ({ reducer1, reducer2 }) => {
    return {
        reducer1Values: reducer1,
        reducer2Values: reducer2 
    };
 };

export default connect(
    mapStateToProps,
    { reducer1, reducer2 }
)(SignInWithStyles);

Redux状态更改，但反应不会重新显示

1 个答案: