反应 Redux 混乱 [英] React Redux Confusion

问题描述

事实证明，Redux 对我来说有点棘手，我想知道是否有人可以帮助我指出正确的方向，我没有抓住哪一部分来获得我想要的结果.预先警告:我使用的是 ES6 语法.

好的，所以我已经设置了一些沙箱来测试 redux 的工作原理，这是我正在使用的当前文件设置.

-actions--index.js-减速机--index.js--reducer_user.js-容器--ReduxTest.js

在我的容器 ReduxTest.js 中，我有以下代码.

import React, { Component } from 'react';从'react-redux'导入{连接}；从 '../actions/index' 导入 { fetchUser };类 ReduxTest 扩展组件 {使成为() {返回 (<div>{console.log(this.props.fetchUser())}{console.log(this.props.user)}

)}}导出默认连接(null，{fetchUser})(ReduxTest)；

当我将 ReduxTest.js 渲染到屏幕上时，第一个 console.log 语句显示为，

Object { type: "FETCH_USER", payload: "这只是一个测试."}

然而，第二个显示为未定义".

这是我的操作 index.js 的样子，

export const FETCH_USER = 'FETCH_USER';导出函数 fetchUser() {const testing = "这只是一个测试.";返回 {类型:FETCH_USER，有效载荷:测试}}

这是我的 reducer_user.js 文件

import { FETCH_USER } from '../actions/index';导出默认函数(状态=空，动作){开关(动作.类型){案例 FETCH_USER:返回 action.payload;}返回状态；}

和最后，这是我在reducer文件夹中的index.js

import { combineReducers } from 'redux';从 './reducer_user' 导入 UserReducer；const rootReducer = combineReducers({用户:UserReducer});导出默认的 rootReducer；

我正在使用 Udemy 的视频教程，因此我在那里获得了一些语法，而没有获得什么.我的印象是我可以从 index.js 减速器访问this.props.user"，但我做错了什么，或者错过了一步.任何帮助将不胜感激.

我很清楚，我的全部意图是成功地让 ReduxTest 容器控制台记录有效负载中的字符串.如果你能帮上忙，我想我可以从那里继续下去.谢谢 =)

解决方案

您只是将动作创建者传递给您的组件.如果您想访问您的 props.user，则必须提供它.您可以通过连接函数的第一个参数实现这一点.

const mapStateToProps = state =>({用户:state.user，});导出默认连接(mapStateToProps, { fetchUser })(ReduxTest);

connect 的第一个参数必须是一个可调用的函数.此函数的唯一参数是当前状态.该函数必须返回一个对象，其中包含您要在组件内访问的所有属性.

请注意，您的用户减速器的状态最初设置为 null.Redux 会触发多个内部操作.如果您在渲染方法中记录当前状态，则可能会发生，在您调用自己的操作之前记录您的状态.这可能会令人困惑.

您可以通过这种方式更改减速器的初始状态:

import { FETCH_USER } from '../actions/index';导出默认功能(状态 = '用户尚未获取'，动作){开关(动作.类型){案例 FETCH_USER:返回 action.payload;}返回状态；}

Redux has proven a little tricky for me to wrap my head around, and I was wondering if someone could help point me in the right direction of what piece I am not grasping to get my desired results. Just a forewarning: I am using ES6 syntax.

Okay, so I have setup somewhat of a sandbox to test out how redux works, and this is the current file setup I am working with.

-actions
  --index.js
-reducers
  --index.js
  --reducer_user.js
-containers
  --ReduxTest.js

In my container, ReduxTest.js, I have the following code.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchUser } from '../actions/index';

class ReduxTest extends Component {
  render() {
    return (
      <div>
        {console.log(this.props.fetchUser())}
        {console.log(this.props.user)}
      </div>
    )
  }
}

export default connect( null, { fetchUser } ) (ReduxTest);

When I render ReduxTest.js to the screen, the first console.log statement shows up as,

Object { type: "FETCH_USER", payload: "This is just a test."}

The second one however, shows up as "undefined".

Here is what my actions index.js looks like,

export const FETCH_USER = 'FETCH_USER';

export function fetchUser() {
  const testing = "This is just a test.";
  return {
    type: FETCH_USER,
    payload: testing
  }
}

Here is my reducer_user.js file

import { FETCH_USER } from '../actions/index';

export default function(state = null, action) {
  switch(action.type) {
    case FETCH_USER:
    return action.payload;
  }
    return state;
}

and finally, here is my index.js in the reducer folder

import { combineReducers } from 'redux';
import UserReducer from './reducer_user';

const rootReducer = combineReducers({
  user: UserReducer
});

export default rootReducer;

I am using a video tutorial from Udemy, so that is where I am getting some of my syntax and what not. I was under the impression that I would be able to access "this.props.user" from the index.js reducer, but I am doing something wrong, or missing a step. Any help would be appreciated.

Just so I am clear, all my intention is, is to successfully have the ReduxTest container console log JUST the string that is in the payload. if you can help with that, I think I can carry it on from there. Thanks =)

解决方案

You're only passing the action creator to your component. If you want to access your props.user than you have to provide it. You can achieve this by the first argument of the connect function.

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

export default connect(mapStateToProps, { fetchUser })(ReduxTest);

The first argument of connect must be a callable function. The only argument of this function is the current state. The function must return an object, containing all properties you want to access inside your component.

Please notice that the state of your user reducer is set to null initially. Redux fires multiple, internal actions. If you log your current state in your render method, it can happen, that your state gets logged before you are calling your own actions. This can be confusing.

You can change the initial state of your reducer this way:

import { FETCH_USER } from '../actions/index';

export default function(state = 'User not fetched yet', action) {
  switch(action.type) {
    case FETCH_USER:
      return action.payload;
  }

  return state;
}

这篇关于反应 Redux 混乱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！