react-redux 的快速入门使用

本文主要记录一些react-redux 的 怎么快速上手使用，具体一些概念如果不理解，大家就查阅官网api

1. 安装react-redux 依赖

npm install redux,react-redux,redux-thunk

2. 写一个store 

为了更好管理store了，都规范了独立建立几个文件放在store 文件夹下

2.1、store/action-type.js : 声明action 的常量

//1.  store/action-type.js 声明action 的常量
export const APP_TOKEN = "APP_TOKEN"  

2.2、store/action.js：定义action 操作，所有数据只能通过action 更新

//2. store/action.js   只能通过触发action更新state 数据的操作
import { APP_TOKEN} from "./action-type";
// 更新appToken
export const UpdateAppToken= (data)=>{
     return (dispatch)=>{
          dispatch({
               type:APP_TOKEN,
               data:data,
          })
     }
}

2.3、store/reducer.js：初始化state数据和接受触发action的数据

//3. store/reducer.js 这里是初始化数据和接受触发action的数据
import {APP_TOKEN,} from "./action-type";
import {combineReducers} from 'redux'

const AppToken = (state="",action)=>{
    switch (action.type) {
        case APP_TOKEN:
               //在这里可以做一下额外处理，如：本地缓存
            if(action.data){     
                sessionStorage.setItem(APP_TOKEN,action.data)
            }else{
                sessionStorage.removeItem(APP_TOKEN);
            }
            return action.data||""
            // break;
        default:
            return  state
    }
}
//如果有多个，可以合拼在一起导出
export const reducers = combineReducers({AppToken})

2.4、store/index.js： 整合处理创建createStore

//4. store/index.js 整合处理创建createStore
import {  createStore, applyMiddleware } from "redux"
import  thunk from "redux-thunk"
import { reducers } from "./reducer";
export default  createStore(reducers,applyMiddleware(thunk))

 

4.  使用

 4.1、  在根组件中注入我们写的store

//src/index.js  项目入口文件
import {Provider} from 'react-redux'
import store from "./store"

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

4.2、 在 类组件中使用

import { connect } from "react-redux";
import {UpdateAppToken} from "./store/action"

//class 定义组件
 class App extends Component {
  render() {
    console.log(this.props)
    return (
      <div>
        <button onClick={()=>this.props.UpdateAppToken("ksdfksf")}>设置token</button>
        <button onClick={()=>this.props.UpdateAppToken("")}>清空token</button>
    
     <div>token值：{this.props.appToken}</div>
    </div>
        
    )
  }
}

//export default App;// 没使用store 的时候导出
/*connect 有两个参数，
第一个是mapStateToProps 函数，返回是一个对象, 其实就是  store/reducer.js 文件声明导出的那些state数据
第二个参数mapDispatchToProps，对应就是store/action.js 的数据
这两个参数的数据都将映射在组件的props 上面
*/ 
const mapStateToProps = (state=>({
     appToken:state.AppToken,
}))
const mapDispatchToProps = {UpdateAppToken}
export default connect(mapStateToProps ,mapDispatchToProps )(App)

4.3、 在函数组件使用(现在有useReducer，这里不讲这个)

 用法和类组件一样，就是用connect 包装组件，示例：

//使用函数组件,这里不使用第二参数了，只是接收显示state(其他组件改变，同步显示)
const ShowAppToken  = connect(state=>({
  appToken:state.appToken
}))((prop)=>{
  return <h1>appToken值：{prop.appToken}</h1>
})

至此，最简单的使用就完成了，redux 是一个很好用的数据共享处理的方案，react-reducer 更是简化对reducer 的操作，将ui层和逻辑层的分离，更多的概念和api 用法参考官网：https://www.redux.org.cn/docs/react-redux/