Blog>
Snippets

Importing Redux Store in ESM Syntax

Describe the process of importing a Redux store configured with ESM syntax into a React component, emphasizing the use of the import statement.
// store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

export const store = createStore(rootReducer);
This is the store.js file where you create and export your Redux store. It imports the `createStore` function from Redux and the root reducer from the reducers directory. Then, it creates the Redux store using the `createStore` function, passing in the root reducer.
// MyComponent.jsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

export default function MyComponent() {
  const dispatch = useDispatch();
  const myState = useSelector((state) => state.myState);
  // You can now use dispatch and myState in your component
}
In this MyComponent.jsx file, we are importing React, and the hooks `useSelector` and `useDispatch` from `react-redux`. The `useSelector` hook is used to access the state from the Redux store, while the `useDispatch` hook is used to dispatch actions to the store. `MyComponent` can interact with the Redux store using these hooks.