如何在 react redux 中从 api 发送响应数据？

Question

当用户登录时，我可以获得以下 Json 数据。

杰森

{
    "hubs": [
        "111.com",
        "222.com",
        "333.com",
}

下面的代码部分

  console.log(response.data.hubs[0])
  console.log(response.data.hubs[1])
  console.log(response.data.hubs[2])

我可以看到这样的网址

"111.com", "222.com", "333.com",

在控制台中。

但是，我使用 dispatch、stores 和 useSelector，我得到了这样的错误。

我不知道为什么会出现错误。

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

登录.js

const Login = () => {

  const history = useHistory();
  const dispatch = useDispatch();
  const [cookies, setCookie] = useCookies();
  const { register, handleSubmit, watch, errors } = useForm();

  const getJwt = async (data) =>{

        const email_encoded = btoa(data.email)
        const password_encoded = btoa(data.password)
        await axios.get('xxx.com', {
          auth: {
            username: data.email,
            password: data.password,
          }
          })
        .then(function (response) {
          console.log("logged in!");
          setCookie('accesstoken', response.data.token, { path: '/' }, { httpOnly: true });
          setCookie('refreshtoken', response.data.refresh_token, { path: '/' }, { httpOnly: true });
          console.log(response.data.hubs[0])
          console.log(response.data.hubs[1])
          console.log(response.data.hubs[2])
          dispatch(setMCUHouse(response.data.hubs[0]));
          dispatch(setMCUCondo(response.data.hubs[1]));
          dispatch(setMCUOffice(response.data.hubs[2]));
        })
        .catch(err => {
            console.log("miss");
            alert("Email or Password is wrong!");
        });
      };

  return (
    <>
            <form onSubmit={handleSubmit(getJwt)}>
              <input placeholder='Email Address' className='form-control login_form' {...register('email')} />
              <div className="login_password_section">
                <input placeholder='Password' className='form-control login_form'  />
                <span
                    onClick={togglePassword}
                    role="presentation"
                    className="password_reveal"
                    >
                </span>
              </div>
            </form>

    </>

  );
}
export default Login;

商店/mcu.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  mcuhouse: '',
  mcucondo: '',
  mcuoffice: '',
};

const slice = createSlice({
  name: "mcu",
  initialState,
  reducers: {

    setMCUHouse: (state, action) => {
      return Object.assign({}, state, { mcuhouse: action.payload })
    },
    setMCUCondo: (state, action) => {
      return Object.assign({}, state, { mcucondo: action.payload })
    },
    setMCUOffice: (state, action) => {
      return Object.assign({}, state, { mcuoffice: action.payload })
    },

  }
});

export default slice.reducer;

export const { setMCUHouse, setMCUCondo, setMCUOffice,  } = slice.actions;

DiscoverCondo.js

  const url = useSelector(state => state.mcu.mcucondo);
  console.log(url)

Answer 1

根据RTK document，

你应该像这样设置configureStore()。

应用程序/store.js

import { configureStore } from '@reduxjs/toolkit';
import mcuReducer from '...';
export const store = configureStore({
  reducer: {
    mcu: mcuReducer,
  },
});
// ...