react-native|react-native redux 与 react-redux 的基本使用
参考原文:
redux http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html
react-redux
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
1 创建 Reducer 根据不同的action 进行 state的刷新 操作 不做异步操作
创建方法 reducerA.js
const initialState = {
isRefreshing: false,
loading: false,
isLoadMore: false,
noMore: false,
articleList: {},
name:"gy",
password:"123456"
};
export default function ReducerA(state = initialState,action) {
switch(action.type){
case "addA":
return {
...state,
name: action.name
};
case "reduceA":
return {
...state,
name: action.name
};
default:
return state
}
}
initialState 存储的是ReducerA中初始的内容
default 必须返回state 不能返回undefind
reducerB.js
const initialState = {
isRefreshing: false,
loading: false,
isLoadMore: false,
noMore: false,
articleList: {},
name:"gy",
password:"123456"
};
export default function ReducerB(state,action) {
switch(action.type){
case "addB":
return {
...state,
username: action.name
};
case "reduceB":
return {
...state,
username: action.name
};
default:
return initialState
}
}
【react-native|react-native redux 与 react-redux 的基本使用】initialState 存储的是ReducerB 中的初始化的state
ReducerA 与 ReducerB中的 initialState 是独立的存在 两者没有关系
合并两个ReducerA 与 ReducerB 导出最终的Reducer
import ReducerA from './ReducerA'
import ReducerB from './ReducerB'
import {combineReducers} from 'redux'export default rootReducer = combineReducers({
ReducerA,
ReducerB
})
combineReducers 用来合并多个Reducer 以方便 分块管理
2 创建store
import {createStore , applyMiddleware} from 'redux'import rootReducer from './reducer/reducer'import createSagaMiddleware, { END } from 'redux-saga';
const middlewares = [];
/*添加的中间组件*/
const sagaMiddleware = createSagaMiddleware();
middlewares.push(sagaMiddleware)/*关联中间组件*/
const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore);
export default function configureStore() {
conststore = createStoreWithMiddleware(rootReducer)
store.runSaga = sagaMiddleware.run
store.close = ()=> store.dispatch(END)
return store
}
3 在组件中使用 store中的数据
import {connect} from 'react-redux'
通过connect 来连接组件的props 与 store中的属性
export default connect(mapStateToProps,mapDispatchToProps)(Login)
关联属性的方法 mapStateToProps 是把store中的数据 绑定到组件的props中
const mapStateToProps = (state,ownProps)=>{
console.log("state==="+state.ReducerA.name)
return {
name:state.ReducerA.name,
password:state.ReducerA.password
}
}
mapDispatchToProps 是组件触发action 刷新store中的数据
const mapDispatchToProps = {
add : () => {
return {
type:"addA",
name:"addA"
}
}
}
组件调用代码:
render(){
const {add} = this.props;
return(
)
}
推荐阅读
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- Docker应用:容器间通信与Mariadb数据库主从复制
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量
- 第326天
- Shell-Bash变量与运算符
- 逻辑回归的理解与python示例
- Guava|Guava RateLimiter与限流算法
- 我和你之前距离
- CGI，FastCGI，PHP-CGI与PHP-FPM
- 原生家庭之痛与超越