React Reducer没有更新状态

Question

我的第一个react-redux应用使我发疯。我的Redux状态永远不会更新。 我试图在网站上找到所有解决方案，但它们无济于事。 One very similar question在这里使用了promise，但我没有。 Redux-dev-tools捕获了actions的{​​{1}}，但是全局状态从未更新，请告诉我，如果可以的话，我应该做什么调试，非常感谢。

First Index.js

login_success

authReducer.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();

authAction.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;

Login.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));
            })
    }
}

而且，该问题导致我的 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无法正常工作。

Answer 1

我想是错字了。

代替

switch (action.types) 

尝试

switch (action.type) 

在reducer中，我们在参数action上获得了从操作返回的对象。