状态未使用 react redux thunk 更新

Question

我对使用 redux 和 react 有点陌生。我正在尝试使用 redux 进行简单的 API 调用并让它在反应中呈现。我可以看到 API 调用在 redux 开发工具的有效负载中工作，但我似乎无法让它更新可能在“连接？”中的状态。

actions/index

import FilmAPI from '../api/api';

export const FETCH_FILMS = 'FETCH_FILMS';
export const RECEIVE_FILMS = 'RECEIVE_FILMS';

export const receiveFilms = (films) => {
  return {
    type: RECEIVE_FILMS,
    films
  };
}

    export const fetchFilmsRequest = () => {
  return dispatch => {
    return axios.get('https://www.snagfilms.com/apis/films.json?limit=10')
      .then(response => {
        dispatch(receiveFilms(response.data))
      })
  }
}

export default fetchFilmsRequest;

reducers/FilmReducer

import RECEIVE_FILMS from '../actions/index';

export function films (state = [], action) {
 switch (action.type) {
    case RECEIVE_FILMS:
      return [...state, action.films];
    default:
      return state;
  }
}

reducers/index

import { combineReducers } from 'redux';
import { films } from './FilmsReducer';

export default combineReducers({
  films,
});

containers/FilmListContainer

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchFilmsRequest } from '../actions';
import FilmList from '../components/FilmList'

class FilmListContainer extends Component {
  constructor(props) {
    super(props);
  }

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

  render() {
    return (
      <div>
        <FilmList films={this.props.films}/>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  films: state.films
})

export default connect(mapStateToProps, {fetchFilmsRequest: fetchFilmsRequest})(FilmListContainer);

configureStore.js

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';

export default function configureStore(initialState) {
    const composeEnhancers =
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
            window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
                // options like actionSanitizer, stateSanitizer
            }) : compose;

    const enhancer = composeEnhancers(
        applyMiddleware(thunk)
    );

    return createStore(
        rootReducer,
        initialState,
        enhancer
    );
}

如前所述，Redux DevTools 在有效负载中显示电影，但电影仍保持 0 的状态。谁能指出我正确的方向？

Answer 1

您可以通过订阅商店获取更新状态并使用store.getState()

步骤：

1. 在组件类的构造函数中编写订阅函数。
2. 通过store.getState()设置类状态。

从'../js/store/index'导入存储；

类 MyClass 扩展组件 {

构造函数（道具，上下文）{

 super(props, context);

 this.state = {

        classVariable: ''

 }
 store.subscribe(() => {

    this.setState({

    classVariable: store.getState().MyStoreState.storeVariable

    });

 });

}

}

Answer 2

您已经接近了，您的操作需要通过调度您的减速器可以捕获的事件来将数据发送到商店。这是使用调度对象上的type 属性完成的。

https://redux.js.org/basics/actions

return fetch('https://www.snagfilms.com/apis/films.json?limit=10')
  .then(response => {
    dispatch({
      type: RECEIVE_FILMS,
      payload: response,
    })
  })

然后你需要在你的 reducer 中抓取数据并将其放入存储中

export function films (state = [], action) {
  switch (action.type) {
    case RECEIVE_FILMS:
      return { 
        ...state,
        films: action.payload.films
      };
    default:
      return state;
  }
}

Answer 3

看起来您只需使用命名导入而不是默认导出将动作类型常量导入减速器。

即import {RECEIVE_FILMS} from '../actions' 而不是 import RECEIVE_FILMS from '../actions'

Answer 4

只需像这样发送已解决的fetch promise 的结果：

如果payload是json，那么：

export const fetchFilmsRequest = () => {
  return dispatch => {
    return fetch('https://www.snagfilms.com/apis/films.json?limit=10')
      .then(response => response.json())
      .then(response => {
        dispatch({
          type: RECEIVE_FILMS,
          payload: response
        })
      })
  }

您的减速器需要稍微修改为：

export function films (state = [], action) {
  switch (action.type) {
    case RECEIVE_FILMS:
      return [...action.payload]; // assuming response is jus array of films
    default:
      return state;
  }
}