Javascript 反应->；为什么我的react没有显示在没有刷新的情况下对状态所做的更改？

我有一个react应用程序，它会向你显示状态的长度，或者更像其中的项目，事情是这样的，但它不会实时显示，它只会在刷新后向你显示状态的更新长度，有我的主页、存储和还原文件。我的问题是如何解决这个问题，为什么会发生，是什么原因造成的，以及在哪里发生的

减速器：

import React from 'react'
const reducers=(state={posts:[{}]}, action)=>{
    switch(action.type){
        case 'post':
            return{
                ...state,
                posts: [...state.posts, {content: action.content}]
            }
        default:
            return state
    }
}
export default reducers

商店：

import {createStore, applyMiddleware} from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' 

import rootReducer from './reducers'

import logger from 'redux-logger'
const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)
export const store = createStore(persistedReducer,applyMiddleware(logger))
export const persistor = persistStore(store)

主页：

import React，{Component}来自“React”
从'react icons/fa'导入{FaHome，FaBell，FaHashtag，FaUser，FaSearch，fafeatherat}
从“反应图标/ai”导入{AiFillMessage}
从'react icons/md'导入{MdSettings}
从“react redux”导入{connect}
从“/Web Dev Projects/React/Amazon Clone/amazonclone/src/store”导入{store}”
从“react bootstrap”导入{Navbar、Nav、NavbarBrand、NaviItem、FormControl、Button}
导入“bootstrap/dist/css/bootstrap.min.css”
导入“./css/Home.css”
从“jquery”导入$
类Home扩展组件{
render（）{
const{posts}=this.props；
const post=（）=>{
dispatch（{类型：'post'，内容：'testpost'}）
}
返回(
家
通知
发现
我
职位

post（）.val（））}>post
{posts.length}
{posts.map（post=>{post.content}）}
)
}
}
const mapStateToProps=（state={posts:[{}]}）=>{
返回{
职位：state.posts
}
}
导出默认连接（MapStateTops）（主）；

调度了哪些操作，它们的值是否正确，以及它们是否正确更改了状态。在你的问题中，我看不到你在哪里发送了会触发你问题中的

案例“post”：

的东西。实际上，我在30分钟前找到了解决方案，问题是我的存储和reducer在components文件夹之外，奇怪。

import React, { Component} from 'react'
import {FaHome, FaBell, FaHashtag,FaUser, FaSearch,FaFeatherAlt} from 'react-icons/fa'
import {AiFillMessage} from 'react-icons/ai'
import {MdSettings} from 'react-icons/md'
import {connect} from 'react-redux'
import {store} from '/Web Dev Projects/React/Amazon Clone/amazonclone/src/store'
import {Navbar, Nav,NavbarBrand, NavItem, FormControl, Button} from 'react-bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import './css/Home.css'
import $ from 'jquery'

class Home extends Component {
    render() {
        const {posts} = this.props;
        const post=()=>{
            store.dispatch({type:'post', content: 'test post'})
        }
        return (
            <div>
                <Navbar bg='white' vraiant='dark'>
                   <NavItem>
                       <span className='homeLink'><FaHome size={25}></FaHome> Home</span>
                       <span className='homeLink'><FaBell size={25}></FaBell> Notifications</span>
                       <span className='homeLink'><FaHashtag size={25}></FaHashtag> Discover</span>
                       <span className='homeLink'><FaUser size={25}></FaUser> Me</span>
                       <span className='messageNotification'><AiFillMessage size={25}></AiFillMessage></span>
                       <span className='settingsButton'><MdSettings size={25}></MdSettings></span>
                       <span className='postButton'><FaFeatherAlt size={25}></FaFeatherAlt></span>


                   </NavItem>
                </Navbar>
                <div className='posts'>
                    <div className='postsHeader'>
                        <p>Posts</p>
                    </div>
                    <div>
                        <FormControl className='makePostField'placeholder='make a post'></FormControl>
                        <Button onClick={()=>post().val())}>Post</Button>
                        {posts.length}
                        {posts.map(post=><div>{post.content}</div>)}
                    </div>
                </div>
            </div>
        )
    }
}
const mapStateToProps=(state={posts:[{}]})=>{
    return{
        posts: state.posts
    }
}
export default connect(mapStateToProps)(Home);