问题:react redux 和 reducer 的问题

我是 react-redux 的新手,reducer 和 store 之间的通信有问题。

这是我基于的想法:

我有一个组件“登录”,它包含一个按钮和两个文本输入,当我单击它时,我将操作发送到减速器。然后,我更新状态,并将其再次发送到 UI(这就是我理解逻辑的方式,如果我错了,请纠正我)。问题出现在减速器中,它从不进入那里,但在操作文件中是的(用 console.logs 测试)。也许连接不起作用?还是在商店的一部分?

在这里,我分离了我是如何做到的

action.js,只有两个操作

const logout = () => {
 return {
 type: "USER_LOGOUT",
 payload: false,
};
};

const login = () => {
 return {
type: "USER_LOGIN",
payload: true,
};
};

export { logout, login };

reducer.js 实现,只改变一个布尔值

const initialState = {
logged: false,
};

export default (state = initialState, action) => {
 if (action.type === "USER_LOGOUT") {
  return {
   ...state,
   logged: false,
 };
}

if (action.type === "USER_LOGIN") {
 return {
   ...state,
   logged: true,
 };
}

return state;
};

index.js(商店),这是我声明商店部分的方式

import { createStore, combineReducers } from "redux";
import loginReducer from "./reducer";

const reducers = combineReducers({
loginReducer,
});

const store = createStore(reducers);

export default store;

Login.js,只有可触摸的部分

import { logout, login } from "../redux/actions";

import { connect } from "react-redux";

...

connect(null, { logout, login }, Login);

...

<TouchableOpacity>
 ...
 onPress={() => checkValidation()}
 ...
</TouchableOpacity>

这里checkValidation,谁调用动作“login”

checkValidation() =>

...
login();
...

解答

您没有发送操作。为了让 Redux 知道一个动作,你必须调度它。

如果您使用的是类组件,则需要连接该组件并将来自 redux 的调度操作传递给它。

我建议你使用钩子,因为它更容易。

1-导入 useDispatch 钩子

import { useDispatch } from "react-redux";

2-创建调度:

const dispatch = useDispatch();

3-调度您的操作:checkValidation() u003d>

...
// Since your function login already returns the action object:
    dispatch(login());
...
Logo

React社区为您提供最前沿的新闻资讯和知识内容

更多推荐