實戰build-react（三）+ style-components

npm install --save style-components

https://www.jianshu.com/p/27788be90605（copy）

"axios": "^0.18.0",
"immutable": "^3.8.2",                                 //不可修改變量插件
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-loadable": "^5.4.0",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",                      // 路由
"react-scripts": "1.1.4",
"react-transition-group": "^2.3.1",                        //動畫
"redux": "^4.0.0",
"redux-immutable": "^4.0.0",                              
"redux-thunk": "^2.3.0",                                       //容許action返回函數
"styled-components": "^3.3.2"                           //全局css

建立完基礎框架

寫完一個模塊，而後建立store，驗證store，而後對store進行優化

涉及到Redux Devtool 和 reducer的分模塊化 

拆分actionCreators和constants的js文件

npm install immutable

npm install redux-immutable --save

npm install react-redux --save

npm install react-router --save

npm install redux-thunk --save

npm install styled-components --save

npm install  react-router-dom --save

建立全局sotre

sotre/index.js

import {createStore,compose, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store=createStore(reducer, composeEnhancers(
    applyMiddleware(thunk)
));
export default store;

sotre/reducer.js

import {combineReducers} from 'redux-immutable'
// import {reducer as headerReducer} from '../common/header/store';
const reducer= combineReducers({
  // header:headerReducer,
});
export default reducer; 

app.js添加路由

import Home from './pages/home';
import Shop from './pages/shop';
import Car from './pages/car';
import User from './pages/user';

   <BrowserRouter>
        <Route path='/' exact component={Home}></Route>
        <Route path='/shop' exact component={Shop}></Route>
        <Route path='/car' exact component={Car}></Route>
        <Route path='/user' exact component={User}></Route>
      </BrowserRouter>

每一個模塊目錄結構，先建立index.js文件

home/index.js

import React, { PureComponent } from 'react';
class Home extends PureComponent {
  render() {
    return (
      <div>Home</div>
    )
  }
  componentDidMount() {
  }
}
export default Home;

若是有公共組件

建立common文件夾

編寫style.js文件（至關於css）

import styled from 'styled-components';
export  const HeaderWrapper=styled.div`
  height:58px;
  background-color: #fff;
  border-bottom:1px solid #f0f0f0;
`;

引入style.js

import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
} from './style';

 nav導航添加連接

import { Link } from 'react-router-dom';
<Link to={'/detail/' + item.get('id')}>
  <div className='nav-item flexca'>商城</div>
</Link>

 sotre  鏈接專題

先修改APP.js，把 Provider放開，引入sotre

import React, { Fragment, Component } from 'react';

import { Provider } from 'react-redux';

import { GlobalStyle } from "./style";

import { BrowserRouter, Route } from 'react-router-dom';

import TabBar from './common/tabBar';

import Home from './pages/home';

import Shop from './pages/shop';

import Car from './pages/car';

import User from './pages/user';

import store from './store';

class App extends Component {

render() {

return (

<Fragment>

<GlobalStyle />

<Provider store={store}>

<BrowserRouter>

<Route path='/' exact component={Home}></Route>

<Route path='/shop' exact component={Shop}></Route>

<Route path='/car' exact component={Car}></Route>

<Route path='/user' exact component={User}></Route>

<TabBar />

</BrowserRouter>

</Provider>

</Fragment>

);

}

}

export default App;

 

先修改模塊主js文件，引入connect，actionCreators

 

import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import { Link } from 'react-router-dom';
import {
  NavBar,
} from './style';
class TabBar extends PureComponent {
  render() {
    const { setBackColor,navNumber } = this.props;
    console.log(navNumber )
//直接函數setBackColor，傳參()=>setBackColor(0)

return ( <NavBar className='flex'>
 

        {/* <Link className='nav-item flexca' to={'/'}  onClick={setBackColor(0)}> */}
          {/* 商城 */}
        {/* </Link> */}

<Link className={`nav-item flexca ${0===navNumber?"active":null}`} to={'/'} onClick={()=>setBackColor(0)}>

商城

</Link>

<Link className={`nav-item flexca ${1===navNumber?"active":null}`} to={'/shop'} onClick={()=>setBackColor(1)}>

分類

</Link>

<Link className={`nav-item flexca ${2===navNumber?"active":null}`} to={'/car'} onClick={()=>setBackColor(2)}>

購物車

</Link>

<Link className={`nav-item flexca ${3===navNumber?"active":null}`} to={'/user'} onClick={()=>setBackColor(3)}>

個人

</Link>

      </NavBar>
    )
  }
  componentDidMount() {
  }
  // setBackColor(){
  //   console.log(1)
  // }
}
const mapState = (state) => ({
  navNumber: state.getIn(['tabBar', 'navNumber'])
});

const mapDispatch = (dispatch) => ({
  setBackColor(number) {
    console.log(1111)
    dispatch(actionCreators.setBackColor(number))
  }
});
export default connect(mapState, mapDispatch)(TabBar);

reducer.js

import {combineReducers} from 'redux-immutable'

import {reducer as tabBarReducer} from '../common/tabBar/store';

const reducer= combineReducers({

tabBar:tabBarReducer,

});

export default reducer;

index.js

import reducer from './reducer';
import * as actionCreators from './actionCreators';
import * as constants from './constants';

export {reducer,actionCreators,constants}

constants.js

export const NAV_SELECT = 'tabBar/NAV_SELECT';

actionCreators.js

// import axios from 'axios';

import * as constants from './constants';

// import { fromJS } from 'immutable';

//*執行完去找reducer

export const setBackColor = (number) => ({

  type: constants.NAV_SELECT,

  number

})

 

成功後，瀏覽器這樣變化

 

引入immutable模塊，'模塊'中的store/reducer文件引入immutable來鎖定state

引入redux-immutable模塊，'項目'store//reducer文件引入redux-immutable

注意：immutable   模塊 fromJS(data)處理過的數據已經不是普通的數據，不準與相同類型的數據進行組合，

而且成功後頁面表象沒有任何編號，但數據確實是全新的數據，不是原始state，注意immutable 流和redux流

 

 

 

 

 

 若是頁面沒報錯，數據還沒出來，就改懷疑有沒有 數據.toJS();這樣才能把數據轉爲普通js數據，才能執行js函數