理解Redux以及如何在项目中的使用

import { createStore, applyMiddleware } from ‘redux‘    //applyMiddleware作用是提供一个中间件，关于Redux中中间件的理解大家可以去官网看一下，很有用处，链接地址：http://cn.redux.js.org/docs/advanced/Middleware.html
import thunk from ‘redux-thunk‘ //可以让dispatch传的内容就不会局限于只能传一个扁平对象了，就可以传一个函数了，关于redux-thunk的话后期我给大家写一个它源码的解析，最近太累了，感兴趣的伙伴先自己查查
import reducers from ‘./reducers‘　　

const store = createStore(reducers,applyMiddleware(thunk))　　　

export default store

import { combineReducers } from ‘redux‘ //为了可以引入多个reducer

//以下是伪代码，只是模拟我们有多个reducer，我们可以把它们合并起来，互不影响

import {reducer as  first} from ‘pages/first‘
import {reducer as ticket} from ‘pages/ticket‘

export default combineReducers({
    first,
    ticket
})

import { Provider } from ‘react-redux‘　　　　//你可以Provider想象成一个注入器，它可以帮我们把store注入到我们的根组件上，这样的话store将无处不在
import store from ‘./store‘
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById(‘root‘)
)

export const GET_COMMENT_DATA = ‘ticket/get_comment_data‘

export const SET_RECORD_DATA = ‘ticket/set_record_data‘

const mapDispatch = (dispatch)=>{
  return {
      loadList(){
          dispatch(loadListDataAsync(dispatch))
      }
  }
}

const mapState = (state) => {
    return {
      swiperList: state.first.list
    }
}

export default connect(mapState,mapDispatch)(App)
记录下我之前遇到的一个小坑，之前我是只在当前组件中用到了dispatch，所以我是这样写的：

export default connect(mapDispatch)(App)　　　　　　//后来发现会有一堆红色的怪物包围着我

正确的姿势其实是这样的：

export default connect(null，mapDispatch)(App)

import { GET_COMMENT_DATA } from ‘./actionTypes‘

export const LoadCommentDataAsync = (dispatch,id)=>{　　　　　　　　
    return ()=>{　　　　　　　　　　　　　　//在这个函数中我们可以进行异步请求数据
        fetch(‘/haha‘, {
            method: ‘GET‘,
            headers: {
                ‘content-type‘: ‘application/json‘
            },
        })
        .then(response => response.json())
        .then(result=>{
            dispatch({　　　　　　　　　　　　//遇到扁平对象了，可以提交到reducer了
              type: GET_COMMENT_DATA,
              comments: result
          })
        })
    }
}

import { GET_COMMENT_DATA } from ‘./actionTypes‘
import { SET_RECORD_DATA } from ‘./actionTypes‘

const defaultState = {
    comments: {},
    records: []
}

export default (state=defaultState,action)=>{
    if(action.type === GET_COMMENT_DATA){
        return {
            ...state,
            comments: action.comments
        }
    }
    if(action.type === SET_RECORD_DATA){
        return {
            ...state,
            records: [...state.records,action.records]
        }
    }
    return state
}

import reducer from ‘./reducer‘

export {
    reducer
}