记录一下自己学习使用Redux的过程:
通过一个简单的Demo理解什么是Redux。个人觉得Redux最大的优势在于没有任何关联(没有嵌套,没有父子组件关系)的两个页面,可以在任意一个页面操作其他界面的state。
功能很简单,单击“+”或“-”,数值对应的增加或者减少。
单击+或者-时不去直接修改数值对应的state,而是通过dispatch去发送一个action,由Reducer去匹配action对应的type来返回不同的state,达到修改state的效果。这也是redux的基本流程。
代码实现:
1.安装redux:
npm install --save redux
npm install --save react-redux
npm install --save redux-logger
2.使用Redux必须在App整体标签外嵌套一层Provider标签并且传入store
首先创建store,新建configStore.js
// redux库里面提供的方法,创建store和middleware中间件
import {createStore,applyMiddleware,compose } from 'redux';
// redux-logger打印logger的中间件,具体效果可以看下图
import {createLogger} from 'redux-logger';
// rootReducer下一步会创建
import RootReducer from '../reducers/RootReducer';
const configureStore = (initialState) => {
const store = createStore(
RootReducer,//reducer模块 下面会创建并解释
initialState,//state初始值
compose (
applyMiddleware(createLogger())
)
)
return store;
}
在Provide标签中传入store
const App = () => {
return (
<Provider store={store}>
//这是app整体最外层的路由 代码就不贴了
<AppNavigator />
</Provider>
);
};
export default App;
3.创建action,redux修改state需要通过dispatch传递action给reducer
首先创建actionTypes常量类,action在return时必须包含type,reducer通过action中的type去匹配之后的操作
ActionTypes.js
//我需要两种actiontype,加,减
export const COUNT_ADD = "COUNT_ADD"
export const COUNT_SUB = "COUNT_SUB"
然后创建action模块,新建CountAction.js文件
//加 //参数代表传进来的数值 增加减少的数值,也可以无参
export const countAdd = (num) => {
return {
type: COUNT_ADD,//上面定义的ActionTypes中的常量
num:num
}
}
//减
export const countSub = (num) => {
return {
type: COUNT_SUB,
num:num
}
}
4.创建reducer模块,利用switch case判断action的type,然后返回对应的state,达到修改state的效果
新建Counter.js
export const initialState = {
des:'测试initialState',//默认state 界面有效果 测试
}
export default function counter(state=initialState,action) {
switch (action.type) {
case COUNT_ADD:
return{
...state,
count:state.count+action.num
}
break;
case COUNT_SUB:
return{
...state,
count:state.count+action.num
}
break;
default:
return {
...state,
count:0,
}
}
}
然后新建RootReducer.js 在第二步创建store时需要
// 取决于这里你加入了多少 reducer
const RootReducer = combineReducers({
Counter:Counter,//刚刚创建的reducer
});
export default RootReducer;
5.到这一步基本的redux就搭建完毕,创建页面实践
class ReduxDemo extends Component {
//这里不用定义任何state,直接在connect方法中获取全局的state 任何页面的都可以
constructor(props){
super(props)
}
render(){
return(
<View style={[styles.container,styles.center,{flexDirection:'row'}]}>
<TouchableOpacity
style={{borderWidth:1,width:50,height:50,justifyContent:'center',alignItems: 'center',margin:5}}
onPress={()=>{
//在进行加减操作时不修改数值对应的state 而是通过dispatch传递action给reducer
this.props.dispatch(countAdd(2))
}}>
<Text>+</Text>
</TouchableOpacity>
<Text style={{margin:5}}>数值:{this.props.count}</Text>
<Text style={{margin:5}}>state:{this.props.des}</Text>
<TouchableOpacity
style={{borderWidth:1,width:50,height:50,justifyContent:'center',alignItems: 'center',margin:5}}
onPress={()=>{
this.props.dispatch(countSub(-2))
}}>
<Text>-</Text>
</TouchableOpacity>
</View>
)
}
}
//在使用redux的页面一定要connect
export default connect(
(state) => ({
//获取全局的state
des:state.counter.des,
count:state.counter.count,
})
)(ReduxDemo)