reactjs - Redux 操作有效，但 reducer 无效

问题描述

不知道为什么我的减速器不工作。我的操作文件中有一个 console.log。例如，当我测试失败的登录尝试时，我会在 loginFromAPI 函数和 loginFailure 函数中看到控制台日志（参见下面的 actions.js）。这些正在输出预期的内容。但是由于某种原因，登录减速器无法正常工作。当我 console.log登录 loginReducer.js时，我什么也看不到。这告诉我，虽然动作有效，但减速器没有。我的 redux 道具不会从初始状态改变（我已经通过输出到控制台检查了这一点）。我将不胜感激解决此问题的任何帮助。

这是文件结构：

app
   reducers
      loginReducer.js
      rootReducer.js
   screens
      Login
         Login.js
         index.js
         actions.js
   store
      configureStore.js
App.js
actionTypes.js

文件configureStore.js

import { createStore, applyMiddleware } from 'redux';
import app from '../reducers/rootReducer';
import thunk from 'redux-thunk';
import {createLogger} from 'redux-logger';

export default function configureStore() {
    const logger = createLogger();
    let store = createStore(app, applyMiddleware(thunk, logger));
    return store;
}

文件rootReducer.js

import { combineReducers } from 'redux';
import loginReducer, * as fromLogin from './loginReducer';

export default combineReducers({
    login: loginReducer
})

export const getLogin = (state) => fromLogin.getLogin(state.login)

文件loginReducer.js

import { LOGIN, LOGIN_SUCCESS, LOGIN_FAILURE } from '../actionTypes';


const initialState = {
    user: {},
    isFetching: false,
    isLoggedIn: false,
    error: false,
    errorMessage: "",
}

export default function loginReducer(state = initialState, action) {
    console.log(action); <-- I do not see this
    switch(action.type) {
        case LOGIN:
            return {
                ...state,
                isFetching: true,
                user: {}
            }
        case LOGIN_SUCCESS: 
            return {
                ...state, 
                isFetching: false,
                isLoggedIn: true,
                user: action.user
            }
        case LOGIN_FAILURE:
            return {
                isFetching: false,
                error: true,
                errorMessage: action.errorMessage
            }
        default:
            return state
    }
}

export const getLogin = (state) => ({
    user: state.user,
    isFetching: state.isFetching,
    isLoggedIn: state.isLoggedIn,
    error: state.error,
    errorMessage: state.errorMessage
})

文件actions.js

import { LOGIN, LOGIN_SUCCESS, LOGIN_FAILURE } from '../../actionTypes';
import axios from 'axios';

export function loginFromAPI(loginInfo) {
        login();
        axios({
            method: 'POST',
            url: 'SOME_URL_GOES_HERE',
            headers: {
                'Content-Type': 'application/json; charset=utf-8',
            },
            data: JSON.stringify({
                email: loginInfo.email,
                password: loginInfo.password
            }),  
        })
        .then((response) => {
            loginSuccess(response.data);
            console.log(response.data);
        })
        .catch(error => {
            switch(error.response.status) {
                case 404:
                    console.log("No user with that email.");
                    loginFailure("No user with that email.")
                    break;
                case 401: 
                    console.log("Invalid password.");
                    loginFailure("Invalid password.")
                    break;
                default: 
                    console.log("There was an error loggin in");
                    loginFailure("There was an error loggin in");
                    break;
            }

        })

}

function login() {
    return {
        type: LOGIN,
    }
}

function loginSuccess(user) {
    return {
        type: LOGIN_SUCCESS,
        user
    }
}

function loginFailure(errorMessage) {
    console.log(errorMessage); <-- I see this output
    return {
        type: LOGIN_FAILURE,
        errorMessage
    }
}

文件index.js

import Login from './Login';
import {connect} from 'react-redux';
import * as actions from './actions';
import {getLogin} from '../../reducers/rootReducer';

const mapStateToProps = (state) => ({
    ...getLogin(state),
})

const mapDispatchToProps = () => ({
    ...actions
})

export default connect(mapStateToProps, mapDispatchToProps)(Login)

文件Login.js

export default class Login extends Component {

  constructor(props) {
    super(props);

    this.state = {
      email: null,
      password: null,
    }
    this.login = this.login.bind(this);
  }

  login() {
    this.props.loginFromAPI({email: this.state.email, password: this.state.password});
    console.log(this.props) <-- This never changes but does show up
  }

  render() {
    let error = this.props.error

    return (
      <ImageBackground source={require('../../assets/Signup.png')} style={styles.container}>
        <View style={styles.content}>

          ...

          Some text input Stuff

          ...

          {error && 
              <Text>{this.props.errorMessage}</Text>
          }

            <Button     
              onPress={this.login}
            />

          ...

    );
  }
}

标签： reactjsreact-nativereduxreact-reduxredux-thunk

reactjs - Redux 操作有效，但 reducer 无效

问题描述

解决方案

推荐阅读