react native redux counter

react native redux counter

read
https://github.com/alinz/example-react-native-redux/tree/master/Counter

think
redux is best

code

• app.js

import {createStore,applyMiddleware,combineReducers} from 'redux';import {Provider} from 'react-redux'import thunk from 'redux-thunk'import * as reducers from '../reducers';import CounterApp from './counterApp';const createStoreWithMiddleware=applyMiddleware(thunk)(createStore);const reducer=combineReducers(reducers);const store=createStoreWithMiddleware(reducer);export default class App extends Component{  render(){    return(      <Provider store={store}>         <CounterApp />      </Provider>    );  }}

explaincreateStore获得store,applyMiddleWare加入中间件的，createStoreWithMiddleware 则是加入thunk中间件的创建store的函数，combineReducers 将多个reducer合并，传入createStore中获得store,store存放reducer返回的值。Provider 让子组件都可以访问到store，采用技术应该是contextType来达到组件树同时能访问某个数据。

• counterApp.js

import {bindActionCreators} from 'redux';import Counter from '../components/counter'import * as counterActions from '../actions/counterActions'import {connect} from 'react-redux'class CounterApp extends React.Component{  constructor(props){    super(props);  }  render(){    const{state,actions}=this.props;    console.log('state --');    console.log(state);    return(      <Counter        looker={state.look}        {...actions}      />    );  }}export default connect(state=>({  state:state.counter}), (dispatch)=>({   actions:bindActionCreators(counterActions,dispatch) } ))(CounterApp)Contact GitHub API Training Shop Blog About

explainbindActionCreators 获得事件对应action,从而为某一事件设置不同的action 导向。connect 方法是将store中的counter属性（reduxer）,和action付给组件，从而可以获得state,actions from this.props.

---

• counter.js

const initialState={  look:0};export default function counter(state=initialState,action={}){  switch (action.type) {    case "smile":        return{          ...state,          look:state.look+1        };    case "cry":      return {        ...state,        look:state.look-1      };    default:    return state;  }}

explaininitialState 设置初始的store,counter  根据不同的action 修改原有state.

end

流程为 press-action-changeType-reduxers-changeStore-counterApp组件的store.counter 根据发生变化自动更新。state 是存在store中的，所以，state change lead to store change.

---

issues

可能出现的问题 state is undefined ,问题请注意在counterApp.js connect方法的第一个参数里面 state:state.counter 这里的counter指的是reduxers里面的reduxer counter 方法。不能写成state.look. state 为store,store 里面存的为各个reduxer 方法名为key 的对象，对象里面包含key 为look的对象。

---

update 2016-08-19
update 2016-08-22