Question

我有新的反应，做出本机反应和还原，我有一个反应原生应用程序，在渲染中有此登录

    render() {
       return (<TouchableOpacity style={Style.btnSubmit} onPress={this.onLoginPressed.bind(this)}>
                <Text style={Style.btnText}>Login</Text>
              </TouchableOpacity>)
}

和onLoginPressed函数在这里

onLoginPressed() {
        const { username, password } = this.props.form;
        this.props.login({ username, password}); // the login is using the fetch api

        // props are not updated with the new state values
        console.log(this.props)
    }

一切正常但是道具在onLoginPressed函数中没有更新，但是，当我在渲染函数中控制登录道具时，它已经更新了。我知道redux做了一个完整的渲染，但我真的不明白它是否应该在调用登录后更新道具。

谢谢

更新这是组件的结尾

function mapStateToProps(state) {
    return {
        ...state.login
    }
}

function mapDispatchToProps(dispatch) {
    return {
        login: (formData) => dispatch(login(formData)),
        facebookLogin: (formData) => dispatch(facebookLogin(formData)),
        setUsername: (username) => dispatch(setUsername(username)),
        setPassword: (password) => dispatch(setPassword(password)),        
    }
}


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

这是行动

import { Host, Endpoints } from '../config/server';
import { loginActions } from '../config/constants';


/*
    * state props
        - form
        - inProgress
        - error
        - data
*/

export function login(form) {
    return (dispatch) => {
        dispatch(loggingIn(true));
        fetch(Host + Endpoints.auth.login, {
            method: 'POST',
            headers: {
                'content-type': 'application/json'
            },
            body: JSON.stringify(form)
        })
            .then(res => res.json())
            .then(res => { 
                dispatch(loggingIn(false));                
                res.error ? dispatch(loginError(res.error)) : 
                            dispatch(loginSuccess(res.data));
            })
            .catch(err => dispatch(loginError(err)));
    }
}

export function facebookLogin(data) {
    return (dispatch) => {
        dispatch(loggingIn());

        fetch(Host + Endpoints.auth.facebookLogin, {
            method: 'POST',
            headers: {
                'content-type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(res => res.json())
        .then(data => dispatch(loginSuccess(data)))
        .catch(err => dispatch(loginError(err)));
    }
}

export function setUsername(username) {
    return {
        type: loginActions.setUsername,
        username
    }
}

export function setPassword(password) {
    return {
        type: loginActions.setPassword,
        password
    }
}

function loginSuccess(data) {
    return {
        type: loginActions.LoginSuccess,
        data
    }
}

function loginError(error) {
    return {
        type: loginActions.LoginError,
        error
    }
}

function loggingIn(val) {
    return {
        type: loginActions.LoggingIn,
        inProgress: val
    }
}

这是减速器

import { loginActions } from '../config/constants';

const initialState = {
  form: {
    username: '',
    password: ''
  },
  data: null,
  inProgress: false,
  error: null
};

export default function loginReducer(state = initialState, action) {
    switch(action.type) {
        case loginActions.LoggingIn: 
            return {
                ...state,
                inProgress: action.inProgress
            }            
        case loginActions.LoginError:
             return {
                ...state, 
                error: action.error,
            }

        case loginActions.LoginSuccess:
            return {
                ...state,
                inProgress: false,
                error: null,
                data: action.data
            }
        case loginActions.setUsername:
            return {
                ...state,
                form: { 
                    username: action.username,
                    password: state.form.password
                }
            }
        case loginActions.setPassword:
            return {
                ...state,
                form: { 
                    username: state.form.username,
                    password: action.password
                }
            }
        default: 
            return {
                ...state
            }
    }
}

和reducer索引文件

import { combineReducers } from 'redux';
import login from './login';

const rootReducer = combineReducers({
    login
});

export default rootReducer;

和configureStore文件

import { createStore, applyMiddleware } from 'redux'
import reducers from './reducers'
import thunk from 'redux-thunk'

export default function configureStore() {
  let store = createStore(reducers, applyMiddleware(thunk))
  return store
}

当然root是由提交者传递商店包装的。

Answer 1

您正在调度登录操作的同一函数调用中执行console.log。这是行不通的，因为JavaScript是非阻塞的，它不会等待登录操作完成并在调用console.log之前更新道具

在componentWillReceiveProps之类的东西中试试console.log。

调用动作后，React本机redux道具未更新

1 个答案: