先来看下通过Redux实现的实例吧:
这个Demo的功能很简单，通过三个按钮实现<Text></Text>组件的文本变换,当点击”增加”按钮时，我们会新增一篇”日记”,内容为”This is a new article.”,
当点击”修改”时，”日记”会更改为”This article is modified.”，当点击”删除”按钮时，会将这篇”日记”删除，文本会设置为空字符串。
然后我们再看以下具体是怎么实现的吧:
- 首先Redux的思想是将数据也页面分离，因此只有大型的项目需要使用，小型的项目没必要使用。
- 了解Redux需要了解action,state,reducers和store的概念，关于这些概念可以前往redux官网了解,再此我就不再深入研究了。
- 说一下我理解的他们之间的关系:
store用来储存reducers,reducers用来储存每一个reducer,而reducer则使用函数(这个函数只有两个参数,第一个是state,第二个是action)来处理action,根据action不同的type返回不同的state,而action是将数据传递到store的唯一来源。
接下来我们通过代码来具体分析一下:
项目的目录结构如下:
首先我们需要创建action(actions/NoteAction.js)，源码如下:
//这个NoteTypes里面均为常量
import *as Types from '../constants/NoteTypes';
export function add() {
return {
type: Types.ADD
};
}
export function del() {
return {
type: Types.DELETE
};
}
export function update() {
return {
type: Types.UPDATE
};
}
接下来创建reducer(reducers/NoteReducer.js)，源码如下:
import *as types from '../constants/NoteTypes';
let initialState = {
text: ''
};
export default function operate(state = initialState, action) {
switch (action.type) {
case types.ADD:
console.log("新添加了一篇文章");
return {
...state,
text: "This is a new article."
};
case types.DELETE:
console.log("这篇文章被我删了");
return {
...state,
text: ""
};
case types.UPDATE:
console.log("这篇文章被我删了");
return {
...state,
text: "This article is modified."
};
default:
return state;
}
};
若有多个reducer,则需要将reducer连接起来(reducers/index.js)，如下:
import {combineReducers} from 'redux';
import operate from './NoteReducer';
let rootReducer = combineReducers({
operate: operate
});
export default rootReducer;
然后我们来看App(App.js)页面里是怎么写的:
import React, {Component} from 'react';
import {Provider} from 'react-redux';
import {createStore} from "redux";
import rootReducer from "./app/reducers";
import Root from "./app/pages/Root";
type Props = {};
//创建store来储存诗句
const store = createStore(rootReducer);
export default class App extends Component<Props> {
render() {
//在<Provider>组件中将store传递下去
return (
<Provider store={store}>
<Root/>
</Provider>
);
}
}
再看Root(Root.js)页面，在这个页面来接收数据:
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Button
} from 'react-native';
import * as NoteAction from "../actions/NoteAction";
import {connect} from "react-redux";
class Root extends Component {
render() {
let {text, add, update, del} = this.props;
return (
<View style={styles.container}>
<Text style={styles.welcome}>
{text}
</Text>
<Button title="增加" onPress={add}/>
<View style={styles.gap}/>
<Button title="修改" onPress={update}/>
<View style={styles.gap}/>
<Button title="删除" onPress={del}/>
</View>
)
}
}
//通过connect这个函数来执行相关的操作，关于connect这个函数的详细解释参见:
//https://github.com/reactjs/react-redux/blob/master/docs/api.md#connect
export default connect(
state => ({
text: state.operate.text
}),
dispatch => ({
add: () => dispatch(NoteAction.add()),
update: () => dispatch(NoteAction.update()),
del: () => dispatch(NoteAction.del())
})
)(Root)
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
gap: {
marginTop: 12
}
});
至此，整个项目算是完成了，当然这只是最初级的使用，限于作者水平，并不能保证正确。有异议的地方，可以通过博客提供的联系方式和我联系，我们共同交流。
Demo源码在此:https://github.com/Samoy/ReduxDemo
这里有官网的其他案例:http://www.redux.org.cn/docs/introduction/Examples.html，有兴趣的话可以自行研究。
欢迎在评论区留下您的见解~