IT技术 - react Redux 混乱 - 吾爱随笔录

事实证明，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;
}

而最后，这是我在减速机文件夹index.js

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

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

export default rootReducer;

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

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