实战build-react（三）+ style-components

转载

mob604756e5abbc 2019-05-27 10:27:00

文章标签 数据 ide ios css 返回函数 文章分类 代码人生

"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

实战build-react（三）+ style-components_css

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>

实战build-react（三）+ style-components_返回函数_02

每个模块目录结构，先创建index.js文件

实战build-react（三）+ style-components_css_03

home/index.js

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

如果有公共组件

创建common文件夹

实战build-react（三）+ style-components_ide_04

编写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 (

</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

})

成功后，浏览器这样变化