2020/11/21、 周六、今天又是奮斗的一天。

@Author：Runsen

上次完成了Header布局如下，這次需要實現動畫效果。

搜索框動畫效果實現

React-transition-group — 它是一個簡單的基本CSS動畫和過渡實現的附加組件。

安裝：cnmp install React-transition-group --save

首先，您需要從 react-transition-group 導入 CSSTransitionGroup。之后，您必須將列表包裝其中并設置 transitionName 屬性。

官方文檔：https://reactcommunity.org/react-transition-group/

當props.focused設置為時true，子組件將首先接收class slide

下面就轉化了store數據的管理，

react-redux

針對于狀態管理的問題就衍生出了很多的技術

安裝：cnpm install redux react-redux，

然后我們需要創建一些文件。src/store/index.js和src/store/reducer.js

由于需要使用redux-devtools-extension插件，需要使用redux的高級用法。

https://github.com/zalmoxisus/redux-devtools-extension

index.js

import {createStore,compose} from 'redux' import reducer from './reducer'// reduxredux中的高級用法 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore(reducer,composeEnhancers())export default store;

在src/store/reducer.js目錄下。如果所有的判斷都寫在reducer.js，代碼會很多，因此需要對store數據和判斷進行拆分。

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

redux官方提供的combineReducers只支持原生JS的形式,所以這里要用redux-immutable提供的combineReducers來代替。

安裝：cnpm install redux-immutable --save

我們使用redux-immutable模塊將這個庫整合進我們的程序，這樣我們就能以Immutable庫提供的數據類型來存儲程序狀態(app state)了。

要將程序狀態(app state)渲染成網頁，我們得把狀態數據從Redux的存儲對象(store)中轉移到React組件里去。這是通過react-redux模塊的“connect()”修飾函數來實現的。

store關聯到React組件

想把store關聯到React，我們需要引入一個輔助函數叫做Provider。然后用Provider組件包裹著App組件，再把store作為props值傳入Provider。

App.js

import React, {Component} from 'react' import Header from './common/header' import {GlobalStyle} from './style' import {GlobalStyleiconfont} from './statics/iconfont/iconfont' import {Provider} from 'react-redux' import store from './store' class App extends Component{render() {return (<React.Fragment><GlobalStyle/><GlobalStyleiconfont/><Provider store = {store}><Header/></Provider></React.Fragment>)} }export default App;

接著在common/header/index.js引入了connect()，它能幫助我們把組件和store連接起來，并且可以獲取state。

connect() 接收四個參數，它們分別是 mapStateToProps，mapDispatchToProps，mergeProps和options。

mapStateToProps(state, ownProps) : stateProps

mapStateToProps這個函數允許我們將 store 中的數據作為 props 綁定到組件上。

第二個是mapDispatchToProps(dispatch, ownProps): dispatchProps

connect 的第二個參數是 mapDispatchToProps，它的功能是，將 action 作為 props 綁定到Header 上。

mapDispatchToProps返回的是方法函數。

index.js

import React from 'react' import { CSSTransition } from 'react-transition-group' import { connect } from 'react-redux' import {actionCreators} from './store'import {HeaderWrapper,Logo,Nav,NavItem,NavSearch,SearchWrapper,Addition,Button, } from './style'// 無狀態組件 const Header = (props) => {return (<HeaderWrapper><Logo></Logo><Nav><NavItem className='left active'>首頁</NavItem><NavItem className='left'>下載App</NavItem><NavItem className='right'>登錄</NavItem><NavItem className='right'><i className="iconfont">&#xe636;</i></NavItem><SearchWrapper><CSSTransitionin={props.focused}timeout={200}classNames="slide"><NavSearchclassName={props.focused ? 'focused' : ''}onFocus={props.handleInputFocus}onBlur={props.handleInputBlur}></NavSearch></CSSTransition><i className={props.focused ? 'focused iconfont' : 'iconfont'}>&#xe60c;</i></SearchWrapper></Nav><Addition><Button className='writting'><i className="iconfont">&#xe678;</i>&nbsp;寫文章</Button><Button className='reg'>注冊</Button></Addition></HeaderWrapper>)}const mapStateToProps = (state) => {return {// state.getIn是immutable fromJS的用法 相當于 // state.get('header').get('focused')focused: state.getIn(['header','focused'])} }const mapDispathToProps = (dispatch) => {return {handleInputFocus() {dispatch(actionCreators.searchFocus());},handleInputBlur() {dispatch(actionCreators.searchBlur());}} }export default connect(mapStateToProps, mapDispathToProps)(Header);

總結

以上是生活随笔為你收集整理的八十四、搜索框动画效果实现，React-Redux 进行应用数据的管理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。