react工作流

redux工作流

框架搭建 默认样式&api

目录结构

src
----- apis
----- common
----- pages
----- App.js
----- index.js
----- index.css

// 相关包安装
yarn add axios styled-components normalize.css react-router-dom

---

redux&router搭建

目录结构

store
----- index.js
----- reducer.js
----- modules
----- actionTypes.js
----- actionCreater.js

安装包

// redux目录搭建
yarn add redux react-redux immutable redux-immutable

index.js

import {createStore} from 'redux'
import reducer from './reducer'
const store = createStore(reducer)

export default store

reducer.js

import {combineReducers} from 'redux-immutable'

import header from './modules/header'

export default combineReducers({
    header
})

module->header.js

import {fromJS} from 'immutable'

const defaultState = fromJS({
    focused: false
})

export default (state=defaultState,action)=>{
    if(action.type==='xxx'){
        return state.set('focused',false)
    }

    return state
}

actionTypes.js

export const FOCUS_CHANGE = 'searchChangeInputFocusChange'

actionCreators.js

import {FOCUS_CHANGE} from './actionTypes'

export const focusChange = ()=>({
    type: FOCUS_CHANGE
})

app.js

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Home from './pages/home';
import Detail from './pages/detail';
import Login from './pages/login';
import { BrowserRouter, Route } from 'react-router-dom';

function App() {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <Route path="/" exact component={Home} />
        <Route path="/detail" component={Detail} />
        <Route path="/login" component={Login} />
      </BrowserRouter>
    </Provider>
  );
}

export default App;