Блог

Я отправил действие в приложении react-redux, состояния редуктора с этим действием были обновлены полезной нагрузкой из действия по мере необходимости. В дополнение к этому, состояния другого редуктора, у которого нет такого действия, были обновлены той же полезной нагрузкой, даже если соответствующее действие не было отправлено. что именно происходит?

 //my action for reducer 1
import { CREATE, UPDATE, DELETE, FETCH_ALL, ITEMS_LOADING } from '../constants/actionTypes';
import * as api from '../api/index';

export const getPosts = () => async (dispatch) => {
    dispatch(setItemsLoading());
    const data = await api.fetchPosts
        .then((res) => {
            dispatch({ type: FETCH_ALL, payload: res.data });
        }).catch(() => {
            console.log("there is error");
        })

}
//my action for reducer 2
import { GET_POST } from '../constants/actionTypes';
import * as api from '../api/index';

export const getSinglePosts = (id) => (dispatch) => {
    return{
        type: GET_POST, payload: id
    }
}

//reducer 1
import { CREATE, UPDATE, DELETE, FETCH_ALL, ITEMS_LOADING } from '../constants/actionTypes';
const initialState = {
    posts: [],
    allLoaded:false,
    loading: false
}
export default (state = initialState, action) => {
    switch (action.type) {
        case DELETE:
            return {
                ...state,
                posts: state.posts.filter((post) => post._id !== action.payload)
            };
        case UPDATE:
            return {
                ...state,
                posts: state.posts.map((post) => post._id === action.payload._id ? action.payload : post)
            };
        case FETCH_ALL:
            return {
                ...state,
                posts: action.payload,
                allLoaded:true,
                loading: false
            };
        case CREATE:
            return {
                ...state,
                posts: [action.payload, ...state.posts]
            };
        case ITEMS_LOADING:
            return {
                ...state,
                loading: true
            };
        default:
            return state;
    }
}

//reducer2

import {
    GET_POST
} from '../constants/actionTypes';

const initialState = {
    info:null,
    postLoaded:false
}

export default function (state = initialState, action) {
    switch (action.type) {
        case GET_POST:
            return {
                ...state,
                postLoaded: true,
                info:action.payload
            };
        default:
            return state;
    }
}

//homepage where action was dispatched
import React, { useState, useEffect } from 'react';
import PageNavbar from './PageNavbar';
import { getPosts } from '../../myActions/posts';
import { useSelector, useDispatch } from 'react-redux';
//import { getSinglePosts } from '../../myActions/single';
import { useHistory } from 'react-router-dom';
import Button from '@material-ui/core/Button';

function MyBlog() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getPosts());
  }, [dispatch]);
  const posts = useSelector((state) => state.posts.posts);
  const history = useHistory();
  return (
    <>
      <PageNavbar />
      <div align="center">
        {posts.map((post) => (
          <>
            <Button href="/user/singlePost" color="primary">
              {post.title}
            </Button>
            <br />
          </>))}
      </div>
    </>
  )
}

export default MyBlog
//root reducer
import { combineReducers } from 'redux';
import posts from './myposts';
import error from './error';
import auth from './auth';
import info from './singlePost';

export default combineReducers({
    info,
    posts,
    auth,
    error
})
//thanks