javascript - Redux 仅在 Refresh 后无法在特定 Route 中工作

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);

导航.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;

动作.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
           })  
       })
   }
}

传奇.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);
}

减速器.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;

任何人都可以帮我解决这个问题？？

标签： javascriptreactjsreduxreact-routerreact-router-redux