Question

我对redux相当陌生，并且遇到了问题。

我正在尝试在登录页面中实现Flash消息，但是redux的派发并没有更改UI状态。

我希望用户成功注册后在登录页面上显示一条Flash消息。

//login.js

class Login extends Component{
    renderMessage() {
        if (this.props.flashMessageType== "registrationComplete"){
            return (
                <Message
                    style={{textAlign: "left"}}
                    success
                    icon="check circle"
                    header="Account Registration was Successful"
                    list={["You must verify your email before logging in"]}
                />
            );
        } else {
            return (null);
        }
    }

    render() {
        return ({
            this.renderMessage()
        });
    }
}


function mapStateToProps(state) {
    return {
        flashMessageType:state.flashMessage.flashType,
    };
}


export default connect(mapStateToProps, actions)(Login);

这是减速器

const initialState = {
    flashType: "",
};

export default function(state = {initialState}, action){
    switch(action.type){
        case USER_REGISTER:
            return [
                ...state,
                {
                    flashType:"registrationComplete"
                }
            ];
        default:
            return initialState;
    }
}

这是动作

export const submitForm = (values,history) => async dispatch => {
    const res = await axios.post('/api/signup', values);
    history.push('/');
    dispatch({type: FETCH_USER, payload: res.data});
    dispatch({type: USER_REGISTER});
};

感谢您的帮助。

谢谢

Vincent

Answer 1

您的减速器应该是：

latest

Answer 2

正如Amr Aly所说（现在如此），这样做实际上是在改变状态：

return[ ...state, { flashType:"registrationComplete" }]

您真正想要的是：

return { ...state, flashMessage: "registrationComplete" }

此外，您的某些代码有些多余，并且/或者缺少一些重要的指令（例如try / catch块）。

您的代码应如下所示：

FlashMessage.js

import React, { PureComponent } from 'react';
import Message from '../some/other/directory';
import actions from '../some/oter/directory':

class Login extends PureComponent {
  render = () => (
    this.props.flashMessage == "registrationComplete"
     ? <Message
         style={{textAlign: "left"}}
         success
         icon="check circle"
         header="Account Registration was Successful"
         list={["You must verify your email before logging in"]}
       />
     : null
  )
}    

export default connect(state => ({ flashMessage: state.auth.flashMessage }), actions)(Login)

reducers.js

import { routerReducer as routing } from 'react-router-redux';
import { combineReducers } from 'redux';
import { FETCH_USER, USER_REGISTER } from '../actions/types';

const authReducer = (state={}, ({ type, payload }) => {
  switch(type){
    case FETCH_USER: return { ...state, loggedinUser: payload };
    case USER_REGISTER: return { ...state, flashMessage: "registrationComplete" }
    default: return state;
  }
}

export default = combineReducers({
  auth: authReducer,
  routing
});

actions.js

import { FETCH_USER, USER_REGISTER } from './types';

export const submitForm = (values,history) => async dispatch => {
  try {
    const {data} = await axios.post('/api/signup',values);
    dispatch({ type:FETCH_USER, payload: data });
    dispatch({ type:USER_REGISTER });
    history.push('/');
  catch (err) {
    console.error("Error: ", err.toString());
  }
};

调度不更改Redux状态

2 个答案: