状态不会使用 React Redux 更改

Question

>我正在使用 react native 和 redux 实现登录页面。这是我的减速器的示例代码。有三种类型;类型。SUBMIT_LOGIN，类型。CHANGE_USERNAME，类型。CHANGE_PASSWORD。

CHANGE_USERNAME和CHANGE_PASSWORD工作正常。但问题是SUBMIT_LOGIN。我想这是因为异步状态的变化。无论如何，在使用 fetch() 方法后可以更改状态？？

export default function login(state = initialState, action = {}) {
switch (action.type) {
case types.SUBMIT_LOGIN: {
let loginStatus = false;
if (state.username != null && state.password != null
&& state.username.length > 0 && state.password.length > 0
&& state.username === state.password) {
loginStatus = true;
} else {
let updatedErrMsg = '';
fetch('https://staging-barrie.mpower.ca/mpower/mpp/weblogin2.action?username='+state.username+'&password='+state.password,
{
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36',
},
}
)
.then((response) => response.json())
.then((responseJson) => {
if (responseJson.result === 'success') {
loginStatus = true;
} else {
loginStatus = false;
updatedErrMsg = 'Incorrect Username or Password.';
}
return {
...state,
isLoggedIn: loginStatus,
errorMsg: updatedErrMsg
};
});
}
return {
...state,
isLoggedIn: loginStatus
};
}
case types.CHANGE_USERNAME:
return {
...state,
username: action.username
};
case types.CHANGE_PASSWORD:
return {
...state,
password: action.password
};
default:
return state;

} }

Answer 1

我相信你可以通过使用Thunk中间件来实现这一点：

https://github.com/gaearon/redux-thunk。

使用此功能，您可以创建一个异步操作创建者，该创建者最终将调度一个操作来更新状态。通过在将动作送入减速器之前创建动作，您应该避免您在这里遇到的任何问题。

首先，您将定义一个简单的操作

const submitLogin(loginStatus, errorMessage){
return {
type: SUBMIT_LOGIN,
loginStatus,
errorMessage
}
}

然后，您将创建最终将调度该操作的异步操作，并将提取结果作为参数传递

const thunk = ()=>{
return (dispatch, getState)=> {
<async action goes here>
dispatch(submitLogin(loginStatus, errorMessage));
}
}

然后，您可以在化简器中构建一个更简单的操作，该操作根据您输入的简单操作更新状态。您需要在代码中的任何地方导入 thunk 动作创建器。

Answer 2

你应该避免在化简器中使用异步调用。您应该有一个单独的方法来执行异步调用，当该调用完成后，它将相应地调度一个操作(在您的情况下SUBMIT_LOGIN)。

保留一个单独的函数，并在请求完成时像这样调度一个操作

function loginUser () {
let loginStatus = false;
if (state.username != null && state.password != null
&& state.username.length > 0 && state.password.length > 0
&& state.username === state.password) {
loginStatus = true;
} else {
let updatedErrMsg = '';
fetch('https://staging-barrie.mpower.ca/mpower/mpp/weblogin2.action?username='+state.username+'&password='+state.password,
{
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36',
},
}
)
.then((response) => response.json())
.then((responseJson) => {
if (responseJson.result === 'success') {
loginStatus = true;
} else {
loginStatus = false;
updatedErrMsg = 'Incorrect Username or Password.';
}
// Request is complete so dispatch an action.
dispactch({type: types.SUBMIT_LOGIN, payload: {loginStatus,updatedErrMsg }})
})
}

并保持减速机清洁。它应该根据action.type返回一个新状态

export default function login(state = initialState, action = {}) {
switch (action.type) {
case types.SUBMIT_LOGIN:
return {
...state,
isLoggedIn: action.payload.loginStatus,
errorMsg: action.paylod.updatedErrMsg
};
case types.CHANGE_USERNAME:
return {
...state,
username: action.username
};
case types.CHANGE_PASSWORD:
return {
...state,
password: action.password
};
default:
return state;