TypeError: dispatch is not a function when clicking the toggle button

Question

我正在使用 react redux-thunk。我有一组从 API 获得的用户数据，这是模式：

.

我已经将“active”属性与 Switch MUI 按钮的 checked 属性连接起来，因此在调用 API 时自然会有一些用户使用他们的 switch 按钮已经在“真实”。我想做的是让开关正常工作，只需点击它并改变它的状态，而不一定要用它做任何事情。

这是我的 toggleType.js:

export const TOGGLE = "TOGGLE";

这是我的 toggleAction.js:

import { TOGGLE } from "./toggleType";

const statusToggleAction = () => {
  return {
    type: TOGGLE,
  };
};
export const statusToggle = () => {
  return (dispatch) => {
    dispatch(statusToggleAction);
  };
};

这是我的 toggleReducer.js:

import { TOGGLE } from "./toggleType";

const initialState = {
  status: false,
};

const toggleReducer = (state = initialState, action) => {
  switch (action.type) {
    case TOGGLE:
      status: true;
    default:
      return state;
  }
};
export default toggleReducer;

一切都在我的userContainer.js之下，像这样：

function UserContainer({ userData, fetchUsers }) {
  useEffect(() => {
    fetchUsers();
  }, []);
  return userData.loading ? (
    <h2>Loading</h2>
  ) : userData.error ? (
    <h2>{userData.error}</h2>
  ) : (
    <Container maxWidth="lg" style={{ flexGrow: 1, height: "100%" }}>
      <h2>User List</h2>
      <div>
        {userData &&
          userData.users &&
          userData.users.map((user) => (
            <div key={user.id}>
              <p>{user.name}</p>
              <Switch checked={user.active} onChange={statusToggle()} />
            </div>
          ))}
      </div>
    </Container>
  );
}

const mapStateToProps = (state) => {
  return { userData: state.user, statusToggle: state.status };
};
const mapDispatchToProps = (dispatch) => {
  return {
    fetchUsers: () => dispatch(fetchUsers()),
    statusToggle: () => dispatch(statusToggle()),
  };
};

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

这是我在单击其中一个开关时遇到的错误：

欢迎任何想法，我像 3 天前一样“学习”了 redux！

Answer 1

toggleReducer.js 中的 toggleReducer 函数，将 status: true; 替换为 return { status: true }。

只是 return 在 toggleAction.js 中的 statusToggle 函数中的操作，没有如下调度。

export const statusToggle = () => {
  return statusToggleAction();
};

或者直接在userContainer.js中调用statusToggleAction如下。

export const statusToggle = () => {
  return (dispatch) => {
    dispatch(statusToggleAction());
  };
};

TypeError: dispatch is not a function when clicking the toggle button

TypeError: dispatch is not a function when clicking the toggle button

redux

redux-thunk

react-redux