正在调度动作创建者，但新状态未在商店中显示

Question

我已经编写了一个服务器并将React与Redux连接起来，也使用了容器组件分离。第一个动作fetchSnus()已成功调度，选择器似乎也可以工作，但出于某种原因我在第一次渲染后调用的所有动作，例如fetchSnu()（仅获取一个单个snu对象） ）例如我无法在商店中访问，这意味着：在将状态和调度映射到this.props下无法访问的道具之后。我真的不明白为什么！

您可以在此处查看整个项目：https://github.com/julibi/shonagon

这是我的容器ReadSingleSnuContainer.js：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchSnus, fetchSnu, setToRead, createSnu, getSnusMatchingKeyword } from '../../actions/index';
import { unreadSnus, randomFirstSnu } from '../../selectors/index';
import ReadSingleSnu from './ReadSingleSnu';

class ReadSingleSnuContainer extends Component {

  componentWillMount() {
    this.props.fetchSnus();
  }

  render() {
    return (
      <ReadSingleSnu { ...this.props } />
    );
  }
}

const mapStateToProps = (state) => {
  return {
    snus: state.snus,
    randomFirstSnu: randomFirstSnu(state),
    candidate: state.candidate
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    fetchSnus: () => dispatch(fetchSnus()),
    getSnusMatchingKeyword,
    fetchSnu,
    setToRead,
    createSnu
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(ReadSingleSnuContainer);

这是我的组件ReadSingleSnu.js：

import React, { Component } from 'react';
import style from './ReadSingleSnu.css'

import Typist from 'react-typist';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

export default class ReadSingleSnu extends Component {
  constructor(props) {
    super(props);
    this.state = { showTitles: false };
  }
  renderRandomFirstSnu() {
    const { randomFirstSnu } = this.props;
    const { showTitles } = this.state;
    // preselect a keyword
    // dispatch the action that searches for other keywords (action I)

    if(randomFirstSnu) {
      return (
        <div>
          <h3><Typist cursor={ { show: false } }>{ randomFirstSnu.title }</Typist></h3>
          <ReactCSSTransitionGroup
            transitionName="snu"
            transitionAppear={ true }
            transitionAppearTimeout={ 1000 }
            transitionEnter={ false }
            transitionLeave={ false }
          >
            <p>{ randomFirstSnu.text }</p>
          </ReactCSSTransitionGroup>
          { !showTitles ? (
            <div>
              <button>Some other</button>
              <button onClick={ () => this.handleDoneReading(randomFirstSnu) }>Done reading, next</button>
            </div>
          ) : (
            <ReactCSSTransitionGroup
              transitionName="keywords"
              transitionAppear={ true }
              transitionAppearTimeout={ 1000 }
              transitionEnter={ false }
              transitionLeave={ false }
            >
              <ul>{ randomFirstSnu.keywords.map((keyword, idx) => 
                <li key={ idx }>
                  <button onClick={ () => this.fetchNextSnu(randomFirstSnu) }>
                    { keyword }
                  </button>
                </li>) }
              </ul> 
            </ReactCSSTransitionGroup>
          )
          }
        </div>
      );
    }
    return <div>Loading ...</div>
  }

  handleDoneReading(snu) {
    const { setToRead, getSnusMatchingKeyword } = this.props;
    const id = snu._id; 
    if (snu.keywords.length > 0 && setToRead) {
      // setToRead(id, snu);

      this.setState({ showTitles: true });

      const randomIndex = Math.floor(Math.random() * snu.keywords.length);
      const randomKeyword = snu.keywords[randomIndex];
      console.log('This is the randomKeyword :', randomKeyword);
      getSnusMatchingKeyword(randomKeyword);
    } else {
        console.log('Here will soon be the select random next snu action :)');
    } 
  }   

  render() {
    console.log('ReadSingleSnu, this.props: ', this.props);
    return (
      <div className={style.App}>
        <div>{ this.renderRandomFirstSnu() }</div>
      </div>
    );
  }
} 

这是我的行动档案：

import axios from 'axios';

export const FETCH_SNUS = 'FETCH_SNUS';
export const FETCH_SNU = 'FETCH_SNU';
export const SET_TO_READ = 'SET_TO_READ';
export const CREATE_SNU = 'CREATE_SNU';

export function getSnusMatchingKeyword(keyword) {
  const request = axios.get(`/snus/keyword/${keyword}`);
  return {
    type: GET_SNUS_MATCHING_KEYWORD,
    payload: request
  };
}

export function fetchSnus() {
    const request = axios.get('/snus');
    return {
        type: FETCH_SNUS,
        payload: request
    };
}

export function fetchSnu(id) {
    const request = axios.get(`/snus/${id}`);
    return {
        type: FETCH_SNU,
        payload: request
    };
}

export function setToRead(id, snu) {
  const request = axios.patch(`/snus/${id}`, { title: snu.title, text: snu.text, keywords: snu.keywords, read: true });
    return {
      type: SET_TO_READ,
      payload: request
    }
}

export function createSnu(object) {
  const request = axios.post('/snus', object);
    return {
      type: CREATE_SNU,
      payload: request
    };
}

减速器：

import { FETCH_SNUS, FETCH_SNU, SET_TO_READ, CREATE_SNU } from '../actions/index';

export default function(state = [], action) {
    switch(action.type) {
    case FETCH_SNUS:
      return [ ...state, ...action.payload.data ];
    case FETCH_SNU:
      return [ ...state, ...action.payload.data ];
    case SET_TO_READ:
      return [ ...state, ...action.payload.data ];
    case CREATE_SNU:
      return [...state, ...action.payload.data ];
        default: 
            return state;
    }
}

我通过Postman测试了所有端点并且它们正常工作。所以这不应该是问题...请帮忙！我无法找到解决这个问题的方法。