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/

　　

 

查看更多关于react-redux 的快速入门使用的详细内容...