React Reducer 没有更新状态

Question

我被我的第一个 react-redux 应用程序逼疯了。我的 Redux 状态永远不会更新。我试图在网站上找到所有解决方案，但它们无济于事。 One very similar question 这里用的是 promise 但我不是。 Redux-dev-tools 捕获了关于 login_success 的 actions 但是全局状态永远不会更新，如果可以请告诉我我应该如何调试，非常感谢。

第一个Index.js

import ... from ... 
const compostEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    const rootReducer = combineReducers({
        auth: authReducer,
    })
    const store = createStore(rootReducer, compostEnhancer(
        applyMiddleware(thunk)
    ));

const app = (<BrowserRouter><App /></BrowserRouter>)

ReactDOM.render(<Provider store={store}>{app}</Provider>, document.getElementById('root'));
registerServiceWorker();

authReducer.js :

import * as actionTypes from '../actions/actionTypes';


const initialState = {
    token: null,
    userId: null,
    error: null,
    loading: false
}

const authReducer = (state = initialState, action) => {
    switch (action.types) {
        case actionTypes.LOGIN_START:
            return {
                ...state,
            };

        case actionTypes.LOGIN_SUCCESS:
            return {
                ...state,
                token: action.idToken,
                userId: action.userId,
                loading: false,
                error:null
            }
        default:
            return state;
    }
}

export default authReducer;

authAction.js:

import * as actionTypes from './actionTypes';
import axios from 'axios';

export const loginStart= () =>{
    return {
        type: actionTypes.LOGIN_START
    };
}

export const loginSuccess = (token,userId) =>{
    return {
        type: actionTypes.LOGIN_SUCCESS,
        userId: userId,
        idtoken: token,
    }
}

export const loginFail = (error) =>{
    return {
        type:actionTypes.LOGIN_FAIL,
        error:error
    }
}

export const auth = (email,password,isSignup ) =>{
    return dispatch =>{
        dispatch(loginStart());
        const authData = {
            email: email,
            password: password,
            returnSecureToken:true
        }
        let url = 'https://www.googleapis.com/identitytoolkit/v3/relyingparty/signupNewUser?key=...'
        if(!isSignup ){
            url = 'https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=...'
        }
        axios.post(url, authData)
            .then( response =>{
                console.log(response);
                dispatch(loginSuccess(response.data.idToken, response.data.localId))
            })
            .catch(err=>{
                console.log(err);
                dispatch(loginFail(err));
            })
    }
}

Login.js（分量）：

 import ... from ...;

    class Login extends Component {
        constructor(props) {
            super(props);
            this.state = {
                email: "",
                password: "",
                isSignup: false,

            }
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
        }
        handleSubmit = e => {
            e.preventDefault();
         // This will trigger actions
            this.props.onAuth(this.state.email, this.state.password, this.state.isSignup);  
            console.log(this.props.token) //here I can Get Token 
        }

        handleChange = (e) => {
            this.setState({ [e.target.name]: e.target.value });
        }

        render() {

            let form =
                <div className={classes.ContactData} >
                    <h4>Sign IN</h4>
                    <form onSubmit={this.handleSubmit} >
                        <Input
                            elementType='input'
                            name="email"
                            required
                            label="Email"
                            placeholder="Email"
                            value={this.state.email}
                            margin="normal"
                            onChange={this.handleChange}

                        />

                        <br />
                        <Input
                            elementType='input'

                            required
                            name="password"
                            value={this.state.password}
                            label="Password"
                            onChange={this.handleChange}
                        />

                        <br />
                        <Button
                            color="primary"
                            type="submit"
                        >Submit</Button>
                        <Button color="primary" href="/"> CANCLE</Button>
                    </form>

                </div>

            if (this.props.loading) {
                form = <Spinner />
            }

            let errorMessage = null;
            if (this.props.error) {
                errorMessage =(
                    <p>{this.props.error.message} </p>
                )

            }

            let token = null;
            if(this.props.token){
                token = this.props.token.toString()
            }

            return (
                <div>
                {errorMessage}
                { form }
                </div>
            )
        }
    }


    const mapStateToProps = state => {
        return {
            loading: state.auth.loading,
            error: state.auth.error,
            token:state.auth.idToken,

        }
    }

    const mapDispatchToProps = dispatch => {
        return {
            onAuth: (email, password, isSignup) => dispatch(actions.auth(email, password, isSignup)),

        }
    }

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

此外，问题导致我的 Spinner 和显示 ErrorMessage 无法正常工作。

Answer 1

我想这是一个打字错误。

而不是

switch (action.types)

试试这个

switch (action.type)

在 reducer 中，我们根据参数 action.

从操作返回一个对象

React Reducer 没有更新状态

React Reducer is not updating State

javascript

reducers

reactjs

redux