无法在 Redux 中更新商店

Question

无法弄清楚为什么我的商店没有更新。我的最终目标是让 Component.js 文件中的 "here is the store first name" 和 "here is the store last name" 显示我在 reducer 中输入的数据块的名字和姓氏（分别是 Joe 和 Smith）。每当我在输入正确的凭据后单击登录按钮时，控制台都会记录 "USERNAME AND PASS MATCH"，它告诉我它识别出我提供的内容与数据中的内容匹配。但是，它出于某种原因拒绝更新商店的 first_name 和 last_name...

在我的 Component.js 文件中：

    import React from "react"
import { connect } from "react-redux"


import { setUsername, setPassword, handleLogin } from "../actions/userActions"


@connect((store) => {
  return {
    loginShow: store.loginShow,
    loggedIn: store.loggedIn,
    username: store.username,
    password: store.password,
    first_name: store.first_name,
    last_name: store.last_name,
    id: store.id,
    invalidAttempt: store.invalidAttempt,
  };
})

export default class Layout extends React.Component {


  render() {

    let loginView = null;

    if (this.props.loginShow && this.props.invalidAttempt === false) {
      loginView = (
        <div className="loginBox">
          <h3>Enter username and password</h3>
          <input type="text" placeholder="Please enter username..."
            onChange={(e) => this.props.dispatch(setUsername(e.target.value))} />
          <br />
          <input type="password" placeholder="Please enter password..."
            onChange={(e) => this.props.dispatch(setPassword(e.target.value))} />
          <p>Here is the store first name: {this.props.first_name}</p>
          <p>Here is the store last name: {this.props.last_name}</p>
          <br />
          <button onClick={() => this.props.dispatch(handleLogin(this.props.username, this.props.password))}>Login</button>
        </div>
      )
    }
    return (
      <div>
        {loginView}
      </div>
    )
  }
}

这是动作文件：

export function setUsername(name) {
    return {
        type: "SET_USERNAME",
        payload: name,
    }
}

export function setPassword(pword) {
    return {
        type: "SET_PASSWORD",
        payload: pword,
    }
}

export function handleLogin(uname, pword) {
    return {
        type: "HANDLE_LOGIN",
        payload: {user: uname, pass: pword}
    }
}

现在在我的减速器文件中，我很确定这就是问题所在：

 let data = [
  {
    "username": "imJoe",
    "first_name": "Joe",
    "last_name": "Smith",
    "password": "password123",
    "id": 1
  }



]

  export default function userReducer(state = {
  loginShow: true,
  loggedIn: false,
  username: '',
  password: '',
  first_name: '',
  last_name: '',
  id: '',
  invalidAttempt: false,
  check: false, 
}, action) {

  switch (action.type) {
    case "SET_USERNAME": {
      console.log("SET USERNAME REUCER")
      return { ...state, username: action.payload }
    }

    case "SET_PASSWORD": {
      console.log("SET PASS REUCER")
      return { ...state, password: action.payload }
    }

    case "HANDLE_LOGIN": {
      console.log("HANDLE LOGIN REDUCER")
      data.map(xyz => {
        if (xyz.username === action.payload.user && xyz.password === action.payload.pass){
          console.log("USERNAME AND PASS MATCH")
          return {
            ...state, 
            first_name: xyz.first_name, 
            last_name: xyz.last_name,
          }
        }
      })
    }
  }
  return state
}

Answer 1

您的商店没有更新，因为在您的情况下 "HANDLE LOGIN"，您 return 什么都没有。来自 redux 文档：reducer 总是应该 return 新状态，但你只映射 return 什么都没有。

"HANDLE_LOGIN" 应该是这样的：

case "HANDLE_LOGIN": {
  console.log("HANDLE LOGIN REDUCER")
  let firstName = null;
  let lastName = null;
  data.map(xyz => {
    if (xyz.username === action.payload.user && xyz.password === action.payload.pass){
      console.log("USERNAME AND PASS MATCH")
      firstName = xyz.first_name;
      lastName = xyz.last_name;
    }
  });

  return {
    ...state, 
    first_name: firstName, 
    last_name: lastName,
   }
}

所以你的 reducer 重新生成数据，即使数据项是 null 你的 reducer returns items with null.

无法在 Redux 中更新商店

Can't Update Store in Redux

store

reactjs

redux