React

Redux 基础使用

联系站长 作者:web知道 来源:未知 2019-12-06 13:41 我要评论

Redux 基础使用...

下载依赖 npm install --save redux react-redux
               npm i react-redux -S


Index.js
引入

import {Provider} from 'react-redux'
import {createStore,combineReducers} from 'redux'
 
在index.js中创建一个reducer,需要传递两个参数,分别为 state和action
//注:此处的state的对象值就是初始化的值
//
payload是传过来的参数
const userReducer = (state={ name:'小白',age:'1'},action)=>{
                                                                                   switch (action.type) {
                                                                                         case 'SET_NAME':
                                                                                          state = {
                                                                                                ...state,
                                                                                                name:action.payload
                                                                                           }
                                                                                           break;
                                                                                        case 'SET_AGE':
                                                                                          state = {
                                                                                              ...state,
                                                                                              age:action.payload
                                                                                          }
                                                                                          break;
                                                                                          default:
                                                                                          break;
}

//单个reducer对象
const store = createStore(userReducer)

//多个reducer对象
const store = createStore(combineReducers({userReducer,ddReducer}))
//注,有多少个初始reducer对象就放多少个即可
 
 
//将store和组件关联起来  使用Provider 把<App/>组件包含起来
ReactDOM.render(
      <Provider store={store}>
           <App />
      </Provider>
, document.getElementById('root'));
 

组件获取store值

  引入
   import {connect} from 'react-redux';
 
在组件底部创建一个函数,用于state的reducer对象赋值
const mapStateToProps = (state)=>{
     return {
        user:state.userReducer  //此处赋值的是reducer对象,上方创建的初始化对象
   }
}

//在组件输出处使用connect把组件和创建的函数关联起来
export default connect(mapStateToProps)(App);

组件内获取值
   this.props.user.name

组件获取store值和设置store值

引入
import {connect} from 'react-redux'

//获取
let mapStateToProps = (state) =>{
    return {
        data:state.userReducer
    }
}

//设置payload不可改
let mapDispatchToProps = (dispatch)=>{
    return {
        setName : (data) =>{
                  dispatch({
                        type:'SET_NAME',
                        payload:data
                   })
        }
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(MyHome)


//组件set
   this.props.setName('蔡先生')

//组件内获取值
   this.props.user.name




本文如有侵犯版权请联系站长删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
精彩导读