score:1

with redux the typical way would be to define the reducer and store in one file:

store/index.js:

import { createstore } from 'redux';

const modalreducer = (state = false, action) => {
  switch (action.type) {
    case 'show':
      return true;
    case 'hide':
      return false;
    default:
      return state;
  }
};

const showstore = createstore(modalreducer);

export default showstore;

your <example> component is essentially the same with some minor changes indicated by the comments in the snippet below:

example.js

function example() {
  // removed as store creation is now done in the store file
  // const showstore = createstore(showstore.reducer)

  // extract data from the redux store state and assign to const
  const showmodal = useselector((state) => state);
  
  const handleshow = () => {
    showstore.dispatch({ type: 'show' });
  };

  const handleclose = () => {
    showstore.dispatch({ type: 'hide' });
  };

  return (
    <div>
      <button onclick={handleshow}>show modal</button>

      // changed to use const declared above
      <modal show={showmodal} onhide={handleclose}>
        <modal.header closebutton>
          <modal.title>modal title</modal.title>
        </modal.header>

        <modal.body>
          <form>
            <form.label>insert text</form.label>
            <form.control type="text" placeholder="sample text" />

            <modal.footer>
              <button onclick={handleclose}>cancel</button>
            </modal.footer>
          </form>
        </modal.body>
      </modal>
    </div>
  );
}

you then wrap the usage of your component with <provider> (passing the store as a prop) so it becomes:

app.js

render(
  <provider store={showstore}>
    <example />
  </provider>,
  document.getelementbyid('root')
);

making sure you import showstore:

import showstore from './store';

there's a working stackblitz example here.


Related Query

More Query from same tag