小白搭建webpack+react+redux+es6（二）

代码仓库地址：webpack+react+redux+es6

样式配置稍提一下

配置css 和修改webpack.dev.config.js

• 安装css-loader 和 style-loader 作为 dev 依赖项

npm i css-loader style-loader -D

• 配置webpack.dev.config.js处理 css

      //...
      module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['react', 'es2015', 'stage-0'],
                  }
                }
              },
              {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
              }
        ]
    },
    //......

配置redux环境和redux-thunk

• 安装依赖

npm install --save redux react-redux
npm install --save redux-thunk

• 在文件夹js/redux下新建三个文件，combineStates.js,connect.js,reducers.js

//combineStates.js
export default ({ initialState, getNewState }) => (state = initialState, action) => ({
    ...state,
    ...(getNewState(state, action) || {}),
  })
  

//connect.js
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import count from './count/action'

const actions={  //按需写入，上方有引入
    count,
}
const reduceObjects = objArr => objArr.reduce((a, b) => ({
    ...a,
    ...b,
  }), {})
  
  export default (...keys) => {
    if (process.env.NODE_ENV === 'development' && (!keys.length)) {
      throw new Error('connect requires keys!')
    }
    if (keys.length === 1) {
      const key = keys[0]
      return connect(
        state => state[key],
        dispatch => bindActionCreators(actions[key], dispatch),
      )
    }
    return connect(
      state => reduceObjects(keys.map(key => state[key])),
      dispatch => reduceObjects(keys.map(key => bindActionCreators(actions[key], dispatch))),
    )
  }

//reducers.js
import {combineReducers} from 'redux'
import combineStates from './CombineStates'

import count from './count/reducer'

const reducers={  //按需引入
    count
}
Object.keys(reducers).forEach(key => (reducers[key] = combineStates(reducers[key])))
export default combineReducers({
    ...reducers
})

• 配置webpack.dev.config.js

    //...
     resolve: {
        //路径重写
        alias: {
            "@con": path.resolve(__dirname,'js/redux/connect.js'),
        },
        extensions: [".js", ".jsx"]
    },
    //...

• 新建一个名叫count的文件夹，在下面新建三个文件，分别为action.js, type.js, reducer.js

//action.js
import Type from './type'
const sleep = time => new Promise(res => setTimeout(res, time))
var self = {
    add: () =>async (dispatch) => { //加
       // await sleep(2000) 延时操作
        dispatch({
            type: Type.add
        })
    }
}
export default  self

//reducer.js
import Type from './type'
 const initialState={
     count:0
 }

 const getNewState=(state=initialState,action)=>{
        switch(action.type){
            case Type.add:
                return{
                    count:state.count+1
                }
            default:
                return state
        }
 }
export default  {
    initialState,
    getNewState
}

//type.js
export default{
    add:"add"
}

• 配置js/index.js文件

import React from 'react';
import {render} from "react-dom";
import {createStore,applyMiddleware,compose} from 'redux'
import {Provider} from 'react-redux'
import thunk from 'redux-thunk';
import axios from 'axios'

import reducers from './redux/reducers.js'
import {Count}from './components/index';

//请求端口总配置
axios.defaults.baseURL = '/api'
// 请求设置拦截
axios.interceptors.request.use(config => config)

if (process.env.NODE_ENV === 'development') {
    window.ajax = axios
  }
const composedCreateStore=compose(
    applyMiddleware(thunk),
    window.devToolsExtension && window.devToolsExtension()
)(createStore)

const store=composedCreateStore(reducers,{}) 
render(
    
        
    
    ,document.getElementById("root")
)

• 在js/components下新建count文件夹，在下面新建index.js

import React from 'react'
import connect from '@con'
import axios from 'axios';

class Count extends React.Component {
    compomentWillMount(){
        
    }
    render() {
        return 
            
{this.props.count}
             this.props.add()}>加
        
    }
}

export default connect("count")(Count)

• 新建并编辑js/components/index.jsx

import Count from './count'
export{
    Count
}

此时redux也可以直接使用了，此时只是对单界面使用，接下来将介绍如何使用react-router搭建多界面应用和使用json-server创建mock测试数据