記錄一次redux使用過程

2021-09-26 15:52:43 字數 2733 閱讀 7473

話說好記性不如爛筆頭,記錄下redux使用過程,方便下次複製用,哈哈

僅做記錄使用,不詳細解釋redux原理

用到的外掛程式 :redux、react-redux、redux-persist、redux-thunk

1、redux/actions/counter.js

// action也是函式

export function setpagetitle (data) )

}}export function setinfolist (data) )

}}export function setpower (data) )

}}

2、redux/reducers/counter.js

// 工具函式,用於組織多個reducer,並返回reducer集合

import from 'redux'

/** 初始化state

*/const initstate =

};/*

* reducer

*/// 乙個reducer就是乙個函式

function pagetitle (state = initstate.pagetitle, action)

}function infolist (state = initstate.infolist, action)

}function power (state = initstate.power, action)

}// 匯出所有reducer

export default combinereducers()

3、redux/store.js

// index.js

// createstore: 用於建立store例項

// 中介軟體,作用:如果不使用該中介軟體,當我們dispatch乙個action時,需要給dispatch函式傳入action物件;但如果我們使用了這個中介軟體,那麼就可以傳入乙個函式,這個函式接收兩個引數:dispatch和getstate。這個dispatch可以在將來的非同步請求完成後使用,對於非同步action很有用

import thunk from 'redux-thunk'

// 引入reducer

import reducers from './reducers/counter'

//redux-persist持久化外掛程式

import from 'redux-persist'

import storage from 'redux-persist/lib/storage/session' // defaults to sessionstorage for web

const persistconfig = ;

const mypersistreducer = persistreducer(persistconfig, reducers)

export const persistor = persiststore(store)

export default store

4、index.js

import react from 'react';

import reactdom from 'react-dom';

import * as serviceworker from './serviceworker';

import './assets/iconfont/iconfont.css'

import "./index.css"

import from 'react-redux'

import store from './redux/store'

import from './redux/store'

import 'element-theme-default';

import "./assets/css/base.css"

import from 'redux-persist/integration/react'

reactdom.render(

,document.getelementbyid('root'));

// unregister() to register() below. note this comes with some pitfalls.

// learn more about service workers:

serviceworker.unregister();

5、使用方法

賦值:

import  from 'react-redux';

import from '../../redux/actions/counter'

省略。。。

this.props.setpower(***) //賦值方法

。。。省略

const setpowerfun = dispatch=>();

export default connect(setpowerfun)(login);

取值:

import  from 'react-redux';

省略console.log(this.props.pagetitle) //取值方法

省略const getpagetitle = state =>

}export default connect(getpagetitle)(login);

記一次RecyclerView使用過程遇到的坑

由於重構模組,將原本直屬與activity布局檔案中的recyclerview,遷移到fragment的布局檔案中,基本是從activity中copy到fragment中,但是,坑來了 fragment中的recyclerview突然無法顯示其中的列表項了。內心的感受是崩潰的 單步除錯,一步步跟蹤,...

記錄一次oracle使用記錄

使用oracle資料庫的專案到我這邊,需要修改,咱雖然 學過 oracle,但那畢竟已經過去了。哈哈。使用database configuration assistant 建立資料庫,建立快完的時候,說我沒有監聽啥的,然後 通過 net manager 建立了,qizhong1 其中選中的那個就是建...

記錄一次sql優化過程

對於我這種剛剛進入dba行業的人來說sql優化是一件很難的事情。所以今天看了一下別人優化的過程順手記錄的一筆。select distinct vi.policy no from odsdata.policy extend info ei,policy vehicle info vi,policy b...