Question

我有一个api调用，它从动作中的状态获取一个变量，该变量进入axios get，并将其传递到那里。我知道这是因为，如果我在axios中控制台变量到达那里，该变量将到达路由和控制器，但是当我在控制台中登录请求时，它将在控制器中为空。我正在尝试对特定电子邮件执行find（）。如果我对其进行硬编码，那么它可以完美地工作，这意味着我的变量可能没有传递到那里，我也不知道为什么。我的帖子效果很好

我的动作

export const getUser = (currentUser) =>  {

return(dispatch, getState) => {

    API.getUserInfo({

        emailaddress:currentUser.emailaddress,
        password: currentUser.password


    })
    .then(res =>  {
                dispatch({type:"USER_PROFILE",userPro:res.data})
            })
    .catch(err => console.log(err));


}

}

减速器

const initState ={

        userProfile:[]




}

const userReducer = (state = initState,action)=>{
    switch(action.type){
        case "CREATE_USER" :
        console.log("created User", action.newProfile)
        return state;
        case "USER_PROFILE":
        console.log("User", action.userPro)
        return {
            userProfile: [...state.userProfile,action.userPro]
        }
        default:
        return state;

    }


}

减速机

const rootReducer = combineReducers({
authR: authReducer,
userR:userReducer

})

mapstatetoprops

const mapStateToProps = (state)=>{
    console.log(state)
    return{
 userInfo:state.userR.userProfile


    }
}

export default connect(  mapStateToProps ) (Layout);

Answer 1

您可以在此处使用redux，也可以使用localstorage，cookie，会话访问这些浏览器存储中的任何一个来设置值，并且在呈现组件时可以从浏览器中检索此数据并创建API呼叫。虽然这不是最佳方法，但是如果您不知道如何使用redux，则可以应用此方法。

Answer 2

对，所以您现在正在从组件状态转变为应用程序状态。这可能会是一个很长的答案，但总之，我建议您阅读Redux和React-Redux文档。 https://redux.js.org/ https://react-redux.js.org/

Redux就是关于在应用程序中持久存储数据。如果要从一个页面中获取数据并使其可在另一页面中使用，这就是您需要的。它基本上由三部分组成：

动作：调用这些函数将数据从组件或API传输到一个公共位置（缩减器）的功能。数据被识别为“有效载荷”。

减速器：由您的操作触发的功能。他们使用“有效载荷”返回新的应用状态（数据）。

商店：顾名思义，它是一个包含所有reduces的对象。您所有应用程序状态的集合。

现在react-redux只是中间件，使您的组件与商店进行通信。

有一些漂亮的标准标记可以使所有这些正常工作。我将向您展示一些示例，假设您的代码看起来像这样。

因此，首先让我们定义一个化简器（缺少更好的单词的数据维护者），然后将其存储在名为 authReducer.js

的文件中

const authReducer = (state = {}, action) => {
   switch(action.type){
      CASE "SET_USER_CREDS":
         return {
             user: action.payload
         }
      default:
         return state
   }
}

export default authReducer

因此深入研究这段代码。我们定义了一个带有两个参数的函数，一个是状态，其初始值为{}，另一个是动作，该动作指的是发送到此reducer的动作。如果存在类型为“ SET_USER_CREDS”的操作，那么化简器将返回一个对象，该对象将包含有关用户的信息。如我们所见，获取数据的唯一方法是通过操作消耗数据。

现在我们需要一个动作，一种与我们刚制造的减速器进行通讯的方式。让我们创建一个名为 authActions.js

的文件

export const recordUser = (userData) => {
   return {
     type: "SET_USER_CREDS":
     payload: userData
   }
}

看起来很简单，我们创建了一个实际上试图满足使我们的减速器工作的要求的功能。这些动作创建者实际上是由我们的组件使用的，这是一种我们可以从组件中获取数据并将其保存在某处的方法。

但是等等，我们将这些数据保存在哪里？我们谈论了减速器，但它们住在哪里？是时候建立我们的商店了。

store.js

import {createStore, combineReducers} from "redux"
import authReducer from "./authReducer"

const store = createStore(combineReducers({
   auth: authReducer
}))

export default store

好的，我们现在有一家商店。有关语法的事实。我们从redux库使用了一些方法。我们使用了createStore（），并传入了CombineReducers（），后者接受一个对象。在对象中，我们为要放入商店的每个化简器定义一个键-值对。密钥通常是reducer正在管理的数据的名称/类型。

很酷，我们已经建立了一个商店，一个减速器和一个动作创建者。但是按原样，React无法与您的商店进行通信。好的，这就是react-redux的用处。无论您定义了react-router-dom路由为何，我们都需要进行一些修改。

让我们说这是您的路由器文件，您需要添加以下内容。

import {Provider} from "react-redux"
import store from "./store"

<Provider store={store}>
  //Routes
</Provider>

<Provider>是一个接受redux-store作为参数的组件。我们可以将<Routes/>包装在其中，从而为我们的所有组件提供存储。

恭喜，我们距离将所有这些工作都进行了大约2步之遥。

因此，现在在Header组件中，或在要输入用户数据的任何位置，都需要做一些事情。

1）引入一些依赖性。

import {connect} from "react-redux"
import {recordUser} from "./authActions"

2）在组件之外。定义一个名为mapDispatchToProps（）的函数

   const mapDispatchToProps = (dispatch) => {
      return {
         recordUser: (userData) => {
            dispatch(recordUser(userData))
         }
      }
   }

简而言之，该函数可以让我们在组件内部调用动作创建者。现在，recordUser键是组件内部的可用支持。

3）在组件内部，您需要定义一个事件处理程序以使用我们的新道具。当用户导航到另一页时，将需要触发它。

handleRecordUser = () => {
   const userData = {
     email: this.state.email,
     password: this.state.password
   }
   this.props.recordUser(userData)
}

因此，正如我们所承诺的那样，它从组件状态中获取数据并将其传递给动作创建者。请记住，您需要调用此事件处理程序以在重新路由到新页面的同时执行此操作。如果您使用<Link>重新路由，请执行以下操作：

4）修改此组件的导出以使用connect()

export default connect(null, mapDispatchToProps)(Header)

connect()使我们的组件可以访问诸如dispatch()之类的方法，这是使用动作创建者的要求。

最后但并非最不重要的是，您会消费您的商店。

在您路由到的组件中，需要执行以下操作：

1）引入一些依赖性。

import {connect} from "react-redux"

2）在组件外部，定义一个名为mapStateToProps（）的函数

const mapStateToProps = (state) => {
   return {
     auth: state.auth
   }
}

mapStateToProps()让您进入存储状态，并使您能够选择要将哪些reducer数据带入组件。 state.auth应该看起来很熟悉，因为在我们的 store.js 文件中，我们定义了{auth：authReducer}的键值对。我们只是在叫那个键。

因此，通过定义auth密钥，我要说的是我将在我的组件中有一个名为this.props.auth的道具，其价值将是减速器的输出。

3）最后，连接您的组件

export default connect(mapStateToProps)(YourComponent)

现在，您可以通过使用this.props.auth来使用Redux存储中保存的数据，从而利用以前的Login组件中的数据。

我的状态中有一个值，我想传递到另一页

2 个答案: