在我的应用程序 + react-redux +react-router 中捕获我的操作状态的更好方法

问题描述

我创建了一个示例来在我的应用程序中使用 react-redux 并打印我的测试值，我怀疑这里是否存在其他方法来捕获商店的状态并且不编写代码 {{1 }} 来捕捉我将保存的 reduce 的值。

感谢大家

文件::应用程序

login[0].user

文件登录

import React from 'react'
import { browserRouter,Route,Switch } from 'react-router-dom'
import Login from '../pages/Login'
import NotFound from '../pages/404'

const App = () => (
    <browserRouter>
        <Switch>
            <Route exact path="/login" name="Login Page" render={props => <Login {...props}/>}  />
            <Route component={NotFound}/>
        </Switch>
    </browserRouter>
)
export default App

文件存储

import React from 'react'
import {connect} from 'react-redux'
const Login = (...login) => {
  console.log("value before")
  console.log(login)
  const loginUser = login[0].user;
  console.log("valor after")
  console.log(loginUser)

}

const mapStateProps = (state)=>{
  return{
    user: state.loginUser,};

}
const wrapper = connect(mapStateProps);
const component = wrapper (Login);

export default component

文件缩减器

import { createStore,combineReducers } from 'redux'
import loginUser from './Redux/reducer/loginUser'

const reducer =combineReducers({loginUser})
const store = createStore(reducer)

export default store

文件操作创建者

const defautlState={username:'test',password:'test'};

function reducer(state= defautlState,{type,payload}){
    switch(type){
        case 'saveSession':{
            return {
                username:'test2',password:'test2'
            };
        }
        default:
            return state;
    }

}

export default reducer;

解决方法

您需要 login[0] 的原因是您在此处定义 Login 的方式：

const Login = (...login) => {

... 表示 login 是一个 rest parameters 数组，并且您的 Login 组件可以接受任意数量的参数。这是不对的，因为 React 组件只能接受一个参数，即 object 的 props。

你想这样定义它：

const Login = (props) => {
  const user = props.user;
  // rest of the component
}

或者你可以destructure参数：

const Login = ({user}) => {
  // rest of the component
}

您也可以不接受任何参数并从 useSelector 而不是 connect 获取 user 的值。

import React from 'react';
import {useSelector} from 'react-redux';

const Login = () => {
  const user = useSelector( state => state.loginUser );
  // rest of the component
}

export default Login;