redux reducer not updating state in store

Question

i am very new to redux so i dont have enough knowledge . iam working on a project in which i need to set up the redux store and use state from the store.However when i am updating the state via reducer ..the code fails ..it doesn't throw any errors but when i console.log(store.getState().Key) the value is not updateed . I am attaching all my files below ...please help me out.Thankyou

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

App.js

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)

searchbar.js

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

        
    }
}

reduces.js

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;

action.js

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
        }
                
    }
}

store.js

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

Answer 1

You need to connect your component to redux , you can use react-redux package for this in searchbar.js import this

import {connect} from 'react-redux';

and create a mapDispatchToProps function

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

export your class component using the connect like this

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

and finally when calling this action in form do it like this

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