React 简易学习（六、数据存储）

1.打开github

    redux：存储项目数据

    react-redux：协助调用redux中的数据

    redux-thunk：协助action导出非对象

    immutable：数据就是一旦创建，就不能更改的数据，保证store里面的数据不被修改

    redux-immutable：讲子界面中的reducer数据统一到总reducer时需要转换使用此包

1.2 创建项目中的store

    在src文件夹下创建一个header模块；
    在header模块下创建store目录；
    在header/store目录下创建四个文件为：actionCreater.js actionTypes.js index.js reducer.js

    actionCreater.js 处理数据的操作并传递给reducer，请求ajax信息
    actionTypes.js 存储常量，作为action和reducer的传递参数
    index.js 导出当前模块的action和reducer给当前模块和总的store调用
    reducer.js 处理当前模块的数据操作

    actionCreater.js

        //引入actionTypes 
       import * as actionTypes from './actionTypes'; 
        //引入ajax包 
        import axios from 'axios'; 
        //因为对store数据使用了此类型，在传递数据时也需要将数据转为immutable类型 
        import { fromJS } from 'immutable'; 

        const chagneList = (list,totalPage)=>({ 
          type:actionTypes.LIST_CHANGE, 
          list:fromJS(list), 
          totalPage:fromJS(totalPage) 
        })
        //由于导入redux-thunk 所以可以导出方法 
        export const AjaxListAction = ()=>{ 
              return (dispatch)=>{ 
                axios.get('/api/headerList.json').then(res=>{ 
                  //处理获取的数据 
                      if(res.data.result){ 
                        let totalPage = Math.ceil(res.list.length/10); 
                        dispatch(chagneList(res.list,totalPage)); 
                     } 
                }).catch(()=>{ 
                  //捕获异常 
                 console.log(error); 
                }) 
          } 
    } 

    actionTypes.js

        export const LIST_CHANGE = "list change";

    reducer.js

        import * as actionTypes from './actionTypes';
        import { fromJS } 'immutable';
        //将state变为不可更改的对象
        const defaultState = fromJS({
          list:[],
          totalPage:1
        });

        export default (state=defaultState ,action)=>{
          switch(action.type){
            case actionTypes.LIST_CHANGE:
                state.merge({
                list:action.list,
                totalPage:action.totalPage
              });
              //或者
              //state.set('list',action.list).set('totalPage',action.totalPage)
              return state;
           default:
              return state;
          }
    }

    index.js

        import reducer from './reducer';
        import * as actionCreater from './actionCreater';
        import * as actionTypes from './actionTypes';

        export {
          reducer,actionTypes,actionCreater
        }

1.3 创建模块中的store

    首先，在src文件夹下创建store目录，并在目录下创建store.js 和 reducer.js

    index.js 存储数据文件
    reducer.js 汇总模块传来的数据，并传递给store

    index.js 

        import { createStore,compose,applyMiddleware } from 'redux';
        import thunk from 'redux-thunk';
        import reducer from './reducer';

        const composeEnhancers = window.__REDUX_DEVTOOLS_EWTENSION_COMPOSE__||compose;

        const store = createStore(reducer,compostEnhancers(applyMiddleware(thunk)));
        export default store;

    reducer.js 

        import { combineReducers } from 'redux-immutable';
        import { reducer as headerReducer } from '../Header/store'

        const reducer = combineReducers({
          header:headerReducer
        })
        export default reducer;

1.4 在项目中部署

    在项目的外层渲染，加上下方代码

        import React from 'react';
        import Header from './Header';
        //引入此包方便调用store里面的数据
        import { Provider } from 'react-redux';
        //调用store里面的数据
        import store from './store';

        function App(){
          return (
            <div className="app">
             <Provider store={store}>
                <Header/>
              <Provider>
            <div>
          );
    }
    export default App;

1.5 在模块中使用

    在模块渲染文件中调用如下

        import React,{ Component } from 'react';
        import { connect } from 'react-redux';
        import { actionCreater } from './store';

        class Header extends Component{
          render(){
            let {list,totalPage} = this.props;
            return(
              <div></div>
            )}
            }
        //此方法讲store里面的数据转存到props中
        const mapStateToProps = (state)=>{
          return {
            totalPage:state.getIn(['header','totalPage']);
            list:state.getIn(['header','list']);
         }
        }
        const mapDispatchToProps = (dispatch)={
          return {
            //此方法中存储多个方法
            demo(){
              dispatch(actionCreater.AjaxListAction());
           },
          }
    }

    export default connect(mapStateToProps,mapDispatchToProps)(Header);