score:0

if you are already using redux, i think it is easier to handle the userinput with it instead of usestate in this situation.

so you can create the userinput redux state and the setuserinput redux action, as well. something like this:

header component

const header = () => {

  const dispatch = usedispatch();
  const userinput = useselector(state => state.userinput)

  const inputchangehandler = (event) => {
    dispatch(setuserinput(event.target.value))
  }

  return (
    <div classname="header">
    <input type="text" name="nome" onchange={inputchangehandler} value={userinput} />
    </div>
  )
}

search component

const search = () => {

  const dispatch = usedispatch();
  const word = useselector(state => state.userinput);

  useeffect(() => {
    dispatch(fetchasyncmoviessearch(word ));
  }, [dispatch, word])

  return (
    <div>
      <movielisting />
    </div>
  )
}

score:0

since you are using redux for state sharing between components, it's best to have a redux action that dispatches the userinput to store from header component when user types in the search, then access userinput from search component later using useselector().

the core idea is dispatching an action that contains user input value to redux store.

your custom updatesearchinput redux action can look like this:

// assuming that you have it in ./customreduxactions.js file
// ...

export const updatesearchinput = (keyword) => ({
  type: 'update-search-input',
  payload: keyword,
});

// ...

then your redux store needs to be able to process this action:

switch (action.type) {
  // ... other actions

  case 'update-search-input':
    return {
      ...state,
      userinput: action.payload
    };

  // ... other actions
}

after this, when you access state.userinput using useselector() you should be able to get the input value from redux store across components.

your header component then can look like this:

    // your custom action written above
    import { updatesearchinput } from './customreduxactions';

    const header = () => {

      const dispatch = usedispatch();
      const userinput = useselector(state => state.userinput);
      
      const inputchangehandler = (event) => {
        const keyword = event.target.value;
        
        // this dispatch() call is most important
        dispatch(updatesearchinput(keyword));
      };
    
      return (
       <div classname="header">
         <input
           type="text"
           name="nome"
           onchange={inputchangehandler}
           value={userinput}
         />
       </div>
      )
    }

your search component remains the same with no changes:

const search = () => {

  const dispatch = usedispatch();
  // access state.userinput from redux store as expected behavior
  const word = useselector(state => state.userinput);

  useeffect(() => {
    dispatch(fetchasyncmoviessearch(word));
  }, [dispatch, word])

  return (
    <div>
      <movielisting />
    </div>
  )
}

Related Query

More Query from same tag