Question

不确定为什么我的减速器不工作。我的操作文件中有一个console.log。因此，例如，当我测试失败的登录尝试时，在loginFromAPI函数和loginFailure函数（请参阅下面的actions.js）中都看到控制台日志。这些正在输出预期的结果。但是由于某种原因，登录还原器无法正常工作。当我在 loginReducer.js 中进行console.log时，什么都看不到。这告诉我，尽管该动作有效，但减速器却无效。我的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}
            />

          ...

    );
  }
}

Answer 1

您不要在mapDispatchToProps中调度动作。 https://redux.js.org/basics/actions

Answer 2

因此，要执行一项操作，您需要返回一个包含与减速器开关盒匹配的键“ type”的对象。

{ 类型：“ MY_ACTION_TYPE” }

但是您的函数loginFromAPI是异步的，因此您不能仅仅从中返回一个对象。为了解决这个问题，您可以使用redux中间件。

最受欢迎的两个是redux-thunk和redux-saga。 redux-thunk简单得多。

Thunk示例：

export function loginFromAPI(loginInfo) {
 return function (dispatch) {
   dispatch(login())

   login()
     .then(res => dispatch(loginSuccess()) // the action you want to dispatch
 }
}

https://www.npmjs.com/package/redux-thunk

https://github.com/redux-saga/redux-saga

Redux动作正常，但减速器无效

2 个答案: