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;
