Question

我正在使用React-Redux，React-Router，Saga，React-Thunk 我所有的应用程序都运行良好，当我刷新页面或自己键入url时，一个也会调度动作的组件给我一个错误，它是一个仅在单击图片后才呈现的组件，它在调度和过滤状态后显示特定的照片通过我在url中发送的id，当我单击照片时它可以正常工作，但是刷新后状态将返回一个空数组，这是我的代码

import React,{useEffect} from 'react';
import styled from 'styled-components';
import {connect} from 'react-redux';
import {fetchImages} from '../redux/actions/Actions';
const Photos = props => {
    useEffect(()=>{props.fetchRequestedPhoto()},[props.requestedPhoto.length])
    console.log(props.requestedPhoto)
}

const mapStateToProps = state =>( {
    requestedPhoto:state.images
})

const mapDispatchToProps = () =>( {
    fetchRequestedPhoto:()=>{return fetchImages()}
})

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

navigation.js

import React from 'react'
import {BrowserRouter as Router , Route } from 'react-router-dom'
import HomePage from '../components/home'
import Categories from '../components/categories'
import  Photos from '../components/photos.js'
import Category from '../components/category'
const Routes = () => {
   return(
       <Router>
       <Route exact path='/' component={HomePage}></Route>
       <Route exact path='/categories' component={Categories }></Route>
       <Route  exact path='/category/:category_id' component={Category}></Route>
       <Route exact path='/photo/:photo_id' component={Photos}></Route>
       </Router>
   )
}
export default Routes;

Action.js

import axios from 'axios';
import { GetCategories,GetImages } from './actionTypes'
export function fetchCategories() {
   var url = 'http://localhost:4000/all_categories';
   return (dispatch) => {
       return axios.get(url).then((res) => {
           dispatch({
               type: GetCategories,
               payload: res.data
           })
       })
   } 
}
export function fetchImages(){
   var url ='http://localhost:4000/all_images';
   return(dispatch) => {
       return axios.get(url).then((res)=>{
           dispatch({
               type:GetImages,
               payload:res.data
           })  
       })
   }
}

saga.js

import {takeEvery,delay,put} from 'redux-saga/effects'
import axios from 'axios';

function* getImagesAsync(){
   delay(4000)
   const response=axios.get('http://localhost:4000/all_images');
   const payloadImages = response;
   yield put({type: 'GetImagesSaga', payload:payloadImages});   
}
export function* watchFetchImages(){
   yield takeEvery("GetImages",getImagesAsync);
}

Reducer.js

import { GetCategories , GetImages } from "../redux/actions/actionTypes"
const initialState = {
   categories: [],
   images:[]
};
const rootReducer = (state = initialState, action) => {
   switch (action.type) {
       case GetCategories:
           return {...state, categories:action.payload}
       case GetImages:
           return{...state,images:action.payload}
       default:
       return state;
   }
};
export default rootReducer;

任何人都可以帮助我吗？

仅刷新后，Redux在特定路由中不起作用

0 个答案: