React 中 redux 的配置和使用

1. 下载依赖

npm i -S redux
npm i -S react-redux
npm i -S redux-devtools-extension

2. 创建文件

1. 在src文件夹下创建redux文件夹

2. 创建文件夹及文件

   • store文件夹和其下的index.js
   • actions文件夹(存放操作)
   • reducers文件夹(存放管理员)和其下的index.js
   • constants文件夹(存放公用不变字符串)和其下的index.js

3. src/constants/index.js

   // 存放action 的 type
   
   // 以下是举例（关于城市的操作类型）
   export const INIT_CITY = 'INIT_CITY'
   export const CHANGE_CITY = 'CHANGE_CITY'
   

4. src/reducers/xxx.js(举例)

   // 路径src/reducers/city.js
   import { INIT_CITY, CHANGE_CITY } from '../constants'
   
   const defaultState = {
       cityName: "北京"
   }
   export default function (state = defaultState, action){
       switch(action.type){
           case  INIT_CITY:
               return {
                   cityName: action.cityName
               };
           case CHANGE_CITY:
               return {
                   cityName: action.cityName
               };
           deault:
               return state;
       }
   }
   

   // 路径src/reducers/index.js
   import { combineReducers } from "redux"
   import city from "./city"
   
   const rootReducer = combineReducers({
       city
   })
   
   export default rootReducer
   

5. src/store/index.js

   import { createStore } from "redux"
   // 引入开发者辅助工具
   import { composeWithDevTools } from "redux-devtools-extension"
   // 引入reducer
   import rootReducer from "../reducers"
   
   
   const store = createStore(rootReducer, composeWithDevTools());
   
   export default store;
   

6. src/actions/xxx.js

   // src/actions/city.js
   import { INIT_CITY, CHANGE_CITY } from '../constants'
   
   export default initCity(cityName) {
       return {
           type: INIT_CITY,
           cityName
       }
   }
   
   export default changeCity(cityName) {
       return {
           type: CHANGE_CITY,
           cityName
       }
   }
   

以上Redux配置完成

3. 关联Redux，使用Redux

3.1 关联Redux

// React src下的 index.js
import { Provider } from "react-redux"
import store from "./redux/store"

ReactDom.render(
	<Provider store= {store}>
        <App />
    </Provider>,
	document.getElementById('root')
)

3.2 使用Redux

1. 传统Class组件

// 要使用 Redux 的组件----------1.传统Class组件
import React, { Component } from 'react'
import { connect } from "react-redux"
import { initCity, changeCity } from "../../redux/actions/city"

class City extends Component {
  // 使Redux中的State数据映射到Props上
  function mapStateToProps(state)   {
      return {
          city: state.city
      }
  }
  // 使Redux中的Action操作映射到Props上
  function mapDispatchToProps(dispatch)   {
      return {
          changeCity: (city) => { dispatch(changeCity(city)) }
      }
  }
  render() {
    return (
      <div>
        <p>{ city.cityName }</p><!-- 北京 -->
        <button onClick={() => {this.props.changeCity("成都")} }></button>
      </div>
    )
  }
}
export default connext(mapStateToProps, mapDispatchToProps)(City)

2. 函数式组件

// 要使用 Redux 的组件----------2. 函数式组件
import React from 'react'
import { useSelector, useDispatch } from "react-redux"
import { initCity, changeCity } from "../../redux/actions/city"

export default function User() {
  const dispatch = useDispatch();
  // 使用 Redux 的state
  const city = useSelector(state => state.city);
  // city = {cityName: "北京"}
  
  function onCityEvent(city) {
      // 使用Redux 的action
      dispatch(changeCity(city))
  }
  return (
    <div>
      <p>{ city.cityName }</p><!-- 北京 -->
      <button onClick={() => onCityEvent("成都") }></button>
    </div>
  )
}