index.js如下
import { createStore } from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store
reducer.js如下
const defaultState = {
focused: fasle
}
export default (state = defaultState, action) => {
if(action.type === 'search_focus') {
// state的副本,不能直接修改 state
let copyState = JSON.parse(JSON.stringfy(state))
copyState.focused = true
return copyState
}
if(action.type === 'search_focus') {
// state的副本,不能直接修改 state
let copyState = JSON.parse(JSON.stringfy(state))
copyState.focused = false
return copyState
}
return state
}
引用Header组件的app.js
import React, {Fragment} from 'react';
// 借助react-redux中的Provider方法 保证他包裹的组件都能直接用到 store
import { Provider } from 'react-redux';
import store from './store/index';
import HeaderWraper from './components/header';
function App() {
return (
// 用法
jianshu-app
);
}
export default App;
Header组件中的代码
import React, {Fragment} from 'react'
//组件借助provider关联 store的方法
import { connect } from 'react-redux'
import {
HeaderInner,
Logo,
Nav,
NavItem,
NavSearch,
NavInput,
Addtion,
Button
} from '../../style';
const HeaderWraper = (props) => {
return (
)
}
// 两个参数
const mapStateToProps = (state) => {
return {
focused: state.Header.focused
}
}
const mapDispatchToProps = (dispatch) => {
return {
handleFocus() {
const action = {
type: 'search_focus'
}
dispatch(action)
},
handleBlur() {
const action = {
type: 'search_blur'
}
dispatch(action)
}
}
}
// connect 的用法
export default connect(mapStateToProps, mapDispatchToProps)(HeaderWraper)
// 有时候如果项目非常大业务复杂,单单的把所有数据都放在 reducer里面会非常的冗杂,不易维护,react-redux提供了combineReducers 进行reducer组件的拆分
reducer.js如下
const defaultState = {
focused: false
}
export default (state = defaultState, action) => {
if (action.type === 'search_focus') {
const stateFb = JSON.parse(JSON.stringify(state))
stateFb.focused = true
return stateFb
}
if (action.type === 'search_blur') {
const stateFb = JSON.parse(JSON.stringify(state))
stateFb.focused = false
return stateFb
}
return state
}
index.js如下
import reducer from './reducer'
export { reducer }
那么 src下面的reducer.js修改成如下
// combineReducers的用法
import { combineReducers } from 'redux'
import {reducer as HeaderReducer } from '../components/header/store'
const reducer = combineReducers({
Header: HeaderReducer
})
export default reducer
以上是2019.10.15学习的内容,笔记一下,以便复习,后续继续,fighting