Question

事实证明，Redux对我来说有点棘手，我想知道是否有人可以帮我指出正确的方向，我不会抓住什么来获得我想要的结果。 只是预警：我使用的是ES6语法。

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

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

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

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);

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

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

然而，第二个显示为“未定义”。

这是我的行为index.js的样子，

export const FETCH_USER = 'FETCH_USER';

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

这是我的reducer_user.js文件

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

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

和终于，这是我在reducer文件夹中的index.js

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

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

export default rootReducer;

我正在使用Udemy的视频教程，所以这就是我获取一些语法的地方，而不是。我的印象是我可以从index.js reducer访问“this.props.user”，但我做错了，或者错过了一步。任何帮助将不胜感激。

我很清楚，我的目的是成功地让ReduxTest容器控制台日志只是有效负载中的字符串。如果你可以提供帮助，我想我可以从那里开始。谢谢=）

Answer 1

您只是将动作创建者传递给您的组件。如果您想访问props.user而不是提供它。您可以通过connect函数的第一个参数来实现此目的。

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

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

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

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

您可以通过以下方式更改减速器的初始状态：

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;
}

React Redux Confusion

1 个答案: