Reactjs Redux状态未更新/重新提交

我有一个带有动作创建者的组件，它在componentWillMount上检索数据，然后将数据存储在redux属性中。我的问题是检索到的数据没有放在filteredPhotos redux存储中

在redux中查看新数据的唯一方法是转到另一个页面。这时我可以看到filteredPhotos存储中的数据。如何立即呈现存储中的新数据

Reducer.js

import { 
    PHOTOS
} from '../actions/types';


const INITIAL_STATE = {  filteredPhotos:[] };

export default function(state = INITIAL_STATE, action) {
  switch (action.type) {
    case PHOTOS:
        console.log("THIS IS THE NEW DATA");
        console.log(action.payload.data);
      return {...state, filteredPhotos: action.payload.data};
  }
  return state;
}

Action index.js

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

import ImageReducer from './Reducer.js';

const rootReducer = combineReducers({
  images: ImageReducer
});

export default rootReducer;

action.js

import axios from 'axios';
const API_URL = 'http://jsonplaceholder.typicode.com/photos'; 

import {
  PHOTOS,
} from './types';


export function fetchPhotos() {
  return function(dispatch) {
    axios.get(`${API_URL}`, {withCredentials: true})
    .then(response => {
      dispatch({
        type:PHOTOS,
        payload: response
      });
    })
   .catch(() => {
      console.log("Not working"");
    });
  }
}

Component.js

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      testing:false,
    };
  }

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

.... 

function mapDispatchToProps(dispatch){
  return bindActionCreators({ fetchPhotos }, dispatch);
}

---

在

componentWillMount（）

中，您需要

分派（this.props.fetchPhotots（））

。否则，操作创建者将无法访问

调度

（假设您也在使用redux thunk中间件）

编辑：

如果组件是

connect

ed，则

dispatch

可在

this.props

中找到：

const {dispatch, fetchPhotos} = this.props;
dispatch(fetchPhotos());

---

在

componentWillMount（）

中，您需要

分派（this.props.fetchPhotots（））

。否则，操作创建者将无法访问

调度

（假设您也在使用redux thunk中间件）

编辑：

如果组件是

connect

ed，则

dispatch

可在

this.props

中找到：

const {dispatch, fetchPhotos} = this.props;
dispatch(fetchPhotos());

---

按照斯卡里西的建议，我使用了dispatch

我在以下方面出错：

dispatch(this.props.fetchPhotots())

所以我用这个来代替：

Component.js

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      testing:false,
    };
  }

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

.... 

function mapDispatchToProps(dispatch){
  return bindActionCreators({ fetchPhotos }, dispatch);
}

---

按照斯卡里西的建议，我使用了dispatch

我在以下方面出错：

dispatch(this.props.fetchPhotots())

所以我用这个来代替：

Component.js

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      testing:false,
    };
  }

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

.... 

function mapDispatchToProps(dispatch){
  return bindActionCreators({ fetchPhotos }, dispatch);
}

---

我再次尝试了这种方法，它说分派没有定义，我需要在组件中提到分派吗？这就是我在mapStateToProps，mapDispatchToProps）（Component.js）之前引用函数mapDispatchToProps时遇到的情况。我再次尝试了这种方法，它说dispatch没有定义，我需要在组件中提到dispatch吗？这是我在mapStateToProps、mapDispatchToProps（Component.js）之前所拥有的，在这里我引用了函数mapDispatchToProps