Normalizing Redux usage

Install & configure redux and react-redux

npm install --save redux react-redux

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux'
import store from './store'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store} >
      <App />
    </Provider>
  </React.StrictMode>
);

Configure warehouse store

Create a new store folder in the src directory and create an index.js file

import { legacy_createStore as createStore } from "redux";
import reducer from "./reducers/root.reducer";

const store = createStore(reducer)

export default store

Create a new reducers folder in the store directory

Create root.reducer.js file, modal.reducer.js file and todoList.reducer.js file under reducers folder

Here we introduce the use of merged reducers to facilitate us to better use redux

modal.reducer.js

const defaultstate = {
  isShowModal: false
}

export default (state = defaultstate, action) => {
  switch (action.type) {
    case "changeModalShow":
      return {
        ...state,
        isShowModal: action.value
      }
    default:
      return state;
  }
}

todoList.reducer.js

const defaultstate = {
    list: [1,2,3,4,5,6]
}

export default (state = defaultstate, action) => {
    switch(action.type) {
        case "changeList":
            return {
                ...state,
                list: action.value
            }
        default:
            return state;
    }
}

The combineReducers method allows us to merge multiple reducer files

root.reducer.js

import { combineReducers } from 'redux'
import ModalReducer from './modal.reducer'
import TodoListReducer from './todoList.reducer'

export default combineReducers({
  modal: ModalReducer,
  todoList: TodoListReducer
})

The page uses the store

App.js

import React from 'react';
import './App.css';
import TotoList from './components/TotoList';
import Modal from './components/Modal';

function App() {
  return (
    <div className="App">
      <TotoList />
      <Modal />
    </div>
  )
}

export default App;

Create a new components folder in the src directory

Create two files TotoList.js and Modal.js

Modal.js

import React from 'react'

const Modal = () => {

  const styles = {
    width: '400px',
    height: '400px',
    left: '50%',
    top: '50%',
    position: 'absolute',
    transform: 'translate(-50%, -50%)',
    background: 'aliceblue',
    display: 'block'
  }

  return (
    <div>
      <button>显示</button>
      <button>隐藏</button>
      <div style={styles}></div>
    </div>
  )
} 

export default Modal

introduce connect

import { connect } from 'react-redux'

export default connect(mapStateToProps, mapDispatchToProps)(Modal)

Configure mapStateToProps

const mapStateToProps = state => ({
  isShowModal: state.modal.isShowModal
})

Configure mapDispatchToProps

Create a const folder under the store file and create a modal.const.js file

modal.const.js

export const CHANGEMODALSHOW = 'changeModalShow'

Create the actions folder under the store file and create the modal.actions.js file

import { CHANGEMODALSHOW } from '../const/modal.const'

export const changeModalShow = value => ({type: CHANGEMODALSHOW, value})

Modal.js

import React from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as modalActions from '../store/actions/modal.actions'

const Modal = ({isShowModal, changeModalShow}) => {

  const styles = {
    width: '400px',
    height: '400px',
    left: '50%',
    top: '50%',
    position: 'absolute',
    transform: 'translate(-50%, -50%)',
    background: 'aliceblue',
    display: isShowModal ? 'block' : 'none'
  }

  const handelShowModal = () => {
    changeModalShow(true)
  }

  const handelHiddenModal = () => {
    changeModalShow(false)
  }

  return (
    <div>
      <button onClick={handelShowModal}>显示</button>
      <button onClick={handelHiddenModal}>隐藏</button>
      <div style={styles}></div>
    </div>
  )
} 

const mapStateToProps = state => ({
  isShowModal: state.modal.isShowModal
})

const mapDispatchToProps = dispatch => bindActionCreators(modalActions, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(Modal)

The writing method of todoList.js is the same