规范化 Redux 使用

安装&配置 redux 和 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>
);

配置仓库 store

src 目录下 新建 store 文件夹，并创建 index.js 文件

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

const store = createStore(reducer)

export default store

store目录下新建 reducers 文件夹

reducers 文件夹下创建 root.reducer.js 文件, modal.reducer.js 文件、todoList.reducer.js 文件

这里引入我们采用合并 reducer，以方便我们更好的使用 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;
    }
}

combineReducers 方法可以让我们将多个 reducer 文件合并

root.reducer.js

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

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

页面使用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;

src 目录下新建 components 文件夹

创建 TotoList.js、 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

引入 connect

import { connect } from 'react-redux'

export default connect(mapStateToProps, mapDispatchToProps)(Modal)

配置 mapStateToProps

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

配置 mapDispatchToProps

store 文件下 创建 const 文件夹，并创建 modal.const.js 文件

modal.const.js

export const CHANGEMODALSHOW = 'changeModalShow'

store 文件下 创建 actions 文件夹，并创建 modal.actions.js 文件

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)

todoList.js 的写法一样的