Javascript redux reducer未更新存储中的状态

我对redux很陌生，所以我没有足够的知识。我正在处理一个项目，在该项目中，我需要设置redux存储并使用存储中的状态。但是，当我通过reducer更新状态时..代码失败..它不会引发任何错误，但当我使用console.log（store.getState（）.Key）时，值不会更新。 我把我所有的文件都附在下面…请帮助我。谢谢

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import {Provider} from 'react-redux';
import {createStore,applyMiddleware} from 'redux';
import Reducers from './redux/reducers.js'
import thunk from 'redux-thunk'

export const store=createStore(Reducers,applyMiddleware(thunk));

ReactDOM.render( <Provider store={store}><App /></Provider> ,document.getElementById('root'));

import React from 'react';
import {Searchbar} from './searchbar.js'
import {connect} from 'react-redux'

class App extends React.Component {
   render(){
    return (
    <div>
       
        <Searchbar {...this.props}/> 
     </div>
  );
 }
}

function mapStateToProps(state){
  return {
      state:state
  }
}

export default connect(mapStateToProps)(App)

import React from 'react'
import {onSubmit,handleChange} from '../redux/action.js'

export class Searchbar extends React.Component{
    render(){
       //console.log("2",this.props);
        return    ( 
            <div className="container">
                <div className="row">               
                     <div className="col s6 offset-s3">
                        <form action=""  onSubmit={(e)=>this.props.dispatch(onSubmit(e))}>
                            <div className="input-field">
                                <input  placeholder="Search" type="text" onChange={(e)=>this.props.dispatch(handleChange(e))} required/>
                            </div>
                        </form>
                    </div>
              </div>
            </div>
        );

        
    }
}

import {state_data} from './store.js'

const Reducers= function reducer(state=state_data,action){
    console.log(action.type);
    switch(action.type){
        
       case "updatedata": return Object.assign({},state,{movies:action.data});
       case "updatekey": return Object.assign({},state,{Key:action.key});
        
       default: return state;
   }

}

export default Reducers;

import {store } from '../index.js'
export function onSubmit(e){
   e.preventDefault();
 //  console.log(store.getState());
    return dispatch=>{
        return fetch(`https://api.themoviedb.org/3/search/movie?api_key=403215d4d68a271d4c5dc907db08554e&query=${store.getState().Key}`)
               .then(data=>data.json())
               .then(data=>{
                   console.log("fetched",data);
                       return {
                    type:"updatedata",
                    data}
                     
                });        
    }
    
}


export function handleChange(e){
    return dispatch=>{
        console.log(e.target.value);
       console.log("store",store.getState().Key);
        return{
            type:"updatekey",
            key:e.target.value
        }
                
    }
}

export const state_data={
    movies:[],
    Key:'spider'
};

action.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import {Provider} from 'react-redux';
import {createStore,applyMiddleware} from 'redux';
import Reducers from './redux/reducers.js'
import thunk from 'redux-thunk'

export const store=createStore(Reducers,applyMiddleware(thunk));

ReactDOM.render( <Provider store={store}><App /></Provider> ,document.getElementById('root'));

import React from 'react';
import {Searchbar} from './searchbar.js'
import {connect} from 'react-redux'

class App extends React.Component {
   render(){
    return (
    <div>
       
        <Searchbar {...this.props}/> 
     </div>
  );
 }
}

function mapStateToProps(state){
  return {
      state:state
  }
}

export default connect(mapStateToProps)(App)

import React from 'react'
import {onSubmit,handleChange} from '../redux/action.js'

export class Searchbar extends React.Component{
    render(){
       //console.log("2",this.props);
        return    ( 
            <div className="container">
                <div className="row">               
                     <div className="col s6 offset-s3">
                        <form action=""  onSubmit={(e)=>this.props.dispatch(onSubmit(e))}>
                            <div className="input-field">
                                <input  placeholder="Search" type="text" onChange={(e)=>this.props.dispatch(handleChange(e))} required/>
                            </div>
                        </form>
                    </div>
              </div>
            </div>
        );

        
    }
}

import {state_data} from './store.js'

const Reducers= function reducer(state=state_data,action){
    console.log(action.type);
    switch(action.type){
        
       case "updatedata": return Object.assign({},state,{movies:action.data});
       case "updatekey": return Object.assign({},state,{Key:action.key});
        
       default: return state;
   }

}

export default Reducers;

import {store } from '../index.js'
export function onSubmit(e){
   e.preventDefault();
 //  console.log(store.getState());
    return dispatch=>{
        return fetch(`https://api.themoviedb.org/3/search/movie?api_key=403215d4d68a271d4c5dc907db08554e&query=${store.getState().Key}`)
               .then(data=>data.json())
               .then(data=>{
                   console.log("fetched",data);
                       return {
                    type:"updatedata",
                    data}
                     
                });        
    }
    
}


export function handleChange(e){
    return dispatch=>{
        console.log(e.target.value);
       console.log("store",store.getState().Key);
        return{
            type:"updatekey",
            key:e.target.value
        }
                
    }
}

export const state_data={
    movies:[],
    Key:'spider'
};

store.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import {Provider} from 'react-redux';
import {createStore,applyMiddleware} from 'redux';
import Reducers from './redux/reducers.js'
import thunk from 'redux-thunk'

export const store=createStore(Reducers,applyMiddleware(thunk));

ReactDOM.render( <Provider store={store}><App /></Provider> ,document.getElementById('root'));

import React from 'react';
import {Searchbar} from './searchbar.js'
import {connect} from 'react-redux'

class App extends React.Component {
   render(){
    return (
    <div>
       
        <Searchbar {...this.props}/> 
     </div>
  );
 }
}

function mapStateToProps(state){
  return {
      state:state
  }
}

export default connect(mapStateToProps)(App)

import React from 'react'
import {onSubmit,handleChange} from '../redux/action.js'

export class Searchbar extends React.Component{
    render(){
       //console.log("2",this.props);
        return    ( 
            <div className="container">
                <div className="row">               
                     <div className="col s6 offset-s3">
                        <form action=""  onSubmit={(e)=>this.props.dispatch(onSubmit(e))}>
                            <div className="input-field">
                                <input  placeholder="Search" type="text" onChange={(e)=>this.props.dispatch(handleChange(e))} required/>
                            </div>
                        </form>
                    </div>
              </div>
            </div>
        );

        
    }
}

import {state_data} from './store.js'

const Reducers= function reducer(state=state_data,action){
    console.log(action.type);
    switch(action.type){
        
       case "updatedata": return Object.assign({},state,{movies:action.data});
       case "updatekey": return Object.assign({},state,{Key:action.key});
        
       default: return state;
   }

}

export default Reducers;

import {store } from '../index.js'
export function onSubmit(e){
   e.preventDefault();
 //  console.log(store.getState());
    return dispatch=>{
        return fetch(`https://api.themoviedb.org/3/search/movie?api_key=403215d4d68a271d4c5dc907db08554e&query=${store.getState().Key}`)
               .then(data=>data.json())
               .then(data=>{
                   console.log("fetched",data);
                       return {
                    type:"updatedata",
                    data}
                     
                });        
    }
    
}


export function handleChange(e){
    return dispatch=>{
        console.log(e.target.value);
       console.log("store",store.getState().Key);
        return{
            type:"updatekey",
            key:e.target.value
        }
                
    }
}

export const state_data={
    movies:[],
    Key:'spider'
};

---

您需要将组件连接到redux，您可以使用react redux包来实现此目的 在

searchbar.js中

导入此

import {connect} from 'react-redux';

并创建一个

mapDispatchToProps

函数

const mapDispatchToProps=(dispatch)=>({
onSubmit:(e)=>dispatch(onSubmit(e))
})

使用如下所示的连接导出类组件

export default connect(undefined,mapDispatchToProps)(searchbar);

 onSubmit={(e)=>this.props.onSubmit(e)}

最后，在表单中调用此操作时，请这样做

export default connect(undefined,mapDispatchToProps)(searchbar);

 onSubmit={(e)=>this.props.onSubmit(e)}

---

在reduces.js中，console.log（操作）是什么；打印？但是我使用onSubmit={（e）=>this.props.dispatch（onSubmit（e））}直接使用dispatch是不对的