diff --git a/.gitignore b/.gitignore index 4e63c73..7dbc69b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ *.iml /.idea/ +.DS_Store + diff --git a/redux/action.md b/redux/action.md index 2878d6a..9b260dc 100644 --- a/redux/action.md +++ b/redux/action.md @@ -37,3 +37,4 @@ store里能直接通过`store.dispatch()`调用`dispatch()`方法,但多数情 * [React Native 学习旅程](https://github.com/Kennytian/learning-react-native/blob/master/README.md) * [Redux 之 Action](https://github.com/Kennytian/learning-react-native/blob/master/redux/action.md) * [Redux 之 Reducer](https://github.com/Kennytian/learning-react-native/blob/master/redux/reducer.md) +* [Redux 之 Store](https://github.com/Kennytian/learning-react-native/blob/master/redux/store.md) diff --git a/redux/reducer.md b/redux/reducer.md index 9f9dec3..248179c 100644 --- a/redux/reducer.md +++ b/redux/reducer.md @@ -65,7 +65,7 @@ reducer就是一个函数,接收旧的state和action,返回新的state. **注意:** -1. **不要修改state**, 使用 [Object.assign()](https://cnodejs.org/topic/56c49662db16d3343df34b13) 新建一个副本( `assign() 可以快速的复制一个或者多个对象到目标对象中` ). 不能`Object.assign(state, {visibilityFilter: action.filter})`, 因为它会改变第一个参数的值, **必须把第一个参数设置为空对象**, 即: `Object.assign({}, {visibilityFilter: action.filter})` +1. **不要修改state**, 使用 [Object.assign()](https://cnodejs.org/topic/56c49662db16d3343df34b13) 新建一个副本( `assign() 可以快速的复制一个或者多个对象到目标对象中` ). 不能`Object.assign(state, {visibilityFilter: action.filter})`, 因为它会改变第一个参数的值。**必须把第一个参数设置为空对象**, 即: `Object.assign({}, {visibilityFilter: action.filter})` 2. 在 default 情况下返回旧的 state. 遇到未知的 action时, 一定要返回旧的state. diff --git a/redux/store.md b/redux/store.md new file mode 100644 index 0000000..6e3ce2a --- /dev/null +++ b/redux/store.md @@ -0,0 +1,51 @@ +# Store 技术要点 + +[action](https://github.com/Kennytian/learning-react-native/blob/master/redux/action.md)用来描述"**发生了什么**",使用[reducer](https://github.com/Kennytian/learning-react-native/blob/master/redux/reducer.md)来"**根据action更新state**"的用法。 + +Store就是把它们联系到一起, 职责如下: +* 维持应用的state +* 提供`getState()`方法获取state +* 提供`dispatch(action)`方法更新state +* 提供`subscribe(listenr)`注册监听 + +**Redux应用只能有一个Store**, 当需要拆分处理数据的逻辑时, 应使用[reducer组合](https://github.com/Kennytian/learning-react-native/blob/master/redux/reducer.md#处理多个action)而不是创建多个store。 + +根据已有的reducer来创建store非常容易, 使用`combineReducers()`将多个reducer合并成为一个. 现在将其导入, 并传递`createStore()`. +
import { createStore } from 'redux';
+import hotelApp from './reducers';
+let store = createStore(hotelApp);
+
+`createStore()`的第二个参数可以设置初始化状态, 这对开发同构应用时非常有用, 可以用于把服务端生成的state转变后在浏览器端传给应用. +
let store = createStore(hotelApp, window.STATE_FROM_SERVER);
+ +### 发起Actions +现在我们创建好了store +
import { addHotel, orderHotel, setVisibilityFilter, VisibilityFilter } from './actions';
+ 
+//打印初始化状态
+console.log(store.getState());
+ 
+//监听state更新时, 打印日志
+//注意subscribe()返回一个函数用来注销监听器
+let unsubscribe = store.subscribe(() => console.log(store.getState()));
+ 
+//发起一系列action
+store.dispatch(addHotel('朝阳大酒店'));
+store.dispatch(addHotel('东直门酒店'));
+store.dispatch(addHotel('望京大酒店'));
+store.dispatch(orderHotel(0));
+store.dispatch(orderHotel(1));
+store.dispatch(setVisibilityFilter(VisibilityFilters.isShow));
+ 
+//停止监听state更新
+unsubscribe();
+
+ +### 纠错 +- QQ:2225226 + +### 相关文档 +* [React Native 学习旅程](https://github.com/Kennytian/learning-react-native/blob/master/README.md) +* [Redux 之 Action](https://github.com/Kennytian/learning-react-native/blob/master/redux/action.md) +* [Redux 之 Reducer](https://github.com/Kennytian/learning-react-native/blob/master/redux/reducer.md) +* [Redux 之 Store](https://github.com/Kennytian/learning-react-native/blob/master/redux/store.md)