react redux 和 reducer 的问题
问题:react redux 和 reducer 的问题 我是 react-redux 的新手,reducer 和 store 之间的通信有问题。 这是我基于的想法: 我有一个组件“登录”,它包含一个按钮和两个文本输入,当我单击它时,我将操作发送到减速器。然后,我更新状态,并将其再次发送到 UI(这就是我理解逻辑的方式,如果我错了,请纠正我)。问题出现在减速器中,它从不进入那里,但在操作文件中是的
·
问题: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());
...
更多推荐
已为社区贡献29255条内容
所有评论(0)