React redux 和 reducer 的问题

Question

我是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，谁调用了“登录”这个动作

checkValidation() =>

...
login();
...

Answer 1

您没有调度操作。要让 Redux 知道一个动作，你必须调度它。

如果您使用的是 class 组件，则需要 connect the component and pass it the dispatch action from redux.

我建议你使用挂钩，因为它更容易。

1-导入 useDispatch 钩子

import { useDispatch } from "react-redux";

2-创建调度：

const dispatch = useDispatch();

3-发送你的动作： checkValidation() =>

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

React redux 和 reducer 的问题

Issue with react redux and reducer

action

store

button

reactjs

redux