我试图使用redux immer库来更新react应用程序状态，问题是即使我在控制台上仍然会收到一条持久的警告消息：
错误：

A non-serializable value was detected in an action, in the path: `user.email`. Value: 
<input id="email" class="input_uawwg0" type="email" name="email" value="moez@gmail.com"> 
Take a look at the logic that dispatched this action:  
Object { type: "LOGIN", user: {…} }
 
(See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants) 
(To allow non-serializable values see: https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data)

下面是后面的逻辑：

// action
const login = (email, password) => {
  return {
    type: LOGIN,
    user: { email, password },
  }
};

// reducer
const actionsReducers = (state={}, action) => {
  switch(action.type) {
    case LOGIN:
      return produce(state, (draft) => {
        return { ...draft, ...action }
      }
    )
    default:
      return state;
}

const loginRequest = (email, password) => (dispatch) => {
  dispatch(login(email, password))
  return axios.get('http://localhost:8080/login-success.json')
    .then( response => dispatch(loginSuccess()))
    .catch( error => dispatch(loginFailure()))
};

const mapDispatchToProps = (dispatch) => ({
  login: (email, password) => dispatch(login(email, password)),
  logout: () => dispatch(logout()),
  displayNotificationDrawer: () =>  dispatch(displayNotificationDrawer()),
  hideNotificationDrawer: () => dispatch(hideNotificationDrawer()),
  loginRequest: () => dispatch(loginRequest(email, password))
});

// index
const root = createRoot(document.getElementById("root"));

const rootReducers = combineReducers({
  uiReducer,
  reducers,
})
const store = configureStore({reducer: uiReducer}, applyMiddleware(thunk))

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

操作必须使用这样的对象更新存储：

{ type: 'LOGIN', user: { email: 'test@test', password: 1234 } }

我叫了 prop 。应用组件中的loginRequest，其中isLoggedIn props为false：

class App extends Component {
  ...

  render() {
    const { 
      ...
      isLoggedIn,
      loginRequest
     } = this.props;
    return (
      <div>
        ...
        <div className={css(styles.app)}>
          {!isLoggedIn ? (
            <BodySection>
              <Login logIn={loginRequest} />
            </BodySection>
          ) : (
            <BodySection>
              <CourseList listCourses={listCourses} />
            </BodySection>
          )}
          <Footer />
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  isLoggedIn: state.isUserLoggedIn,
  ...
});

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