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.
Source: stackoverflow.com
Related Query
- How can show and hide react components using hooks
- How to show a modal dialog in React using bootstrap
- Hide and Show modal on mouseenter and mouseleave using React Hooks
- how to hide a bootstrap modal using React JSX
- How to show the content and hide the content conditionally in react using hooks
- how to hide and show componet in react js using a single button
- How to hide react bootstrap modal and also call the save function?
- How to show and hide some columns on React Table?
- how to hide and show a div in react
- How to execute store.unsubscribe from useEffect using React hooks and Redux
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- how to hide and show loading spinner - Activity Indicator react native, managing props and state
- How to hide a button when printing using react and styled components?
- How to display multiple elements using bootstrap grid system and React Js
- How do I hide an svg and show another when using a phone?
- how to show and hide popup only when promise is active ? React
- How to test mapStateToProps using React Redux and Jest?
- In React, using bootstrap modal how to edit and update State?
- How to show react and angular on same page using micro-frontend Runtime integration approach?
- how to show react bootstrap modal inside the function
- React MaterialTable editable row validation - how to show and hide error?
- How to hide a column on REACT Material table in all rows and show it on Edit for the Particular Row I am editing and Add Operations on new row adding?
- How to Hide and show HTML based on a cookie existing or not in a React App
- How to show raspberrypi sensor data in react using nodejs and socketio
- How do I display data from api using react and redux
- How to show and hide a Modal in child component from Parent component?
- How to update a post using react and redux
- How to show and hide components in React to implement a multiple steps form?
- I want to show and hide a form on toggle of a radio button in React js . Im trying how to use react hooks to hide or show a component on onChange even
- How to access an image link inside an object and show it using react componenets
More Query from same tag
- React: Props sent by parent are not the same received by child
- ReactJS Component not updating on parent state change
- React: How do I execute code whenever a route is activated?
- After fetching data from DRF ListAPIView, how do I get it into a form needed to perform a map() method on it?
- Promise only resolves correctly on page refresh
- React JS inherit functionally to several components
- Pull Role information from Authorization header in Hasura
- Should I use react-router for a tabs component?
- How to import jQuery in a React component?
- How to set up AWS message queuing (SMS) in React & Java Spring
- How to make a Bootstrap dropdown with React
- variable value not changing inside axios then method
- ComponentDidUpdate Inside HOC is not being logged when input value Changes in Container
- get same value from multiple select dropdown in react js
- How can I have one function run only when the other has finished ? (setTimeout within for-loop)
- How to resolve ' error TS2351: Cannot use 'new' with an expression whose type lacks a call or construct signature.'?
- React Native & TypeScript : Property 'focus' does not exist on type 'RefObject<TextInput>'
- Cannot Read Property of undefined Object in dependencies array in useEffect or useCallback in React
- Onclose of a modal, how to get focus back to the interactive element clicked on? React Js
- Conditional rendering inside form in React not working
- React project not running on windows but runs on ubuntu
- React: Why <Input> puts the event object at the end of the argument of the event handler
- is it possible to animate a strikethrough with React Spring?
- React + Spring Boot deployment
- Routes are not navigating when React v15.5 setup with react-redux v5 is
- Updating useState from props
- React redux call multiple actions synchronously
- Setting value and clicking a submit button with react-testing-library
- How to not re-render React component's specific DOM elements?
- create-react-app not working. Getting error "Module not found"