React手稿之 React-Redux
React-Redux
Redux
Action
function addTodo(text) { return { type: ADD_TODO, text } }
type
属性是必须的。Reducer
function todoApp(state = initialState, action) { switch (action.type) { case ADD_TODO: return Object.assign({}, state, { todo: action.todo }) default: return state } }
1、需要一个
case
与action
的type
一致。2、必须在
switch
的defautl
返回原state
。Store
- 管理整个应用的
state
- 提供
getState()
方法,可以获取state
- 通过
dispatch(action)
设置state
- 提供
subscribe(listener)
注册和取消注册监听事件
- 管理整个应用的
React-Redux
是Redux的React实现,可参考 Official React bindings for Redux.
安装
yarn add redux react-redux //or npm i redux react-redxu
组件层级划分
表现性组件
只负责显示UI的组件。
例如:
<div></div>
容器性组件
不处理UI的组件,也不处理数据,只为UI组件提供数据的组件。
例如:
connect(state => state)(<YourComponent />)
- 其他组件
除以上两种组件以外的组件。
使用Redux
我们以一个计数器的例子来说明如何使用React-redux.
设计表现性组件
需要:显示当前计数,默认为0;累加按钮,每次单击加1;递减按钮,每次单击减1;重置按钮,单击将计数设置为0。
import React from 'react'; export default ({counter = 0}) => { const styles = { display: 'flex', justifyContent: 'space-around' }; return ( <div> <h1>当前计数为:{counter}</h1> <div style={styles}> <button>加</button> <button>减</button> <button>重置</button> </div> </div> ); };
设置容器性组件
目的是将表现性组件中的数据抽离出去交给redux管理,然后通过容器性组件将redxu与表现性组件关联起来。
import { connect } from 'react-redux'; import CounterIndex from '../components/chapter03/Counter'; export default connect(state => ({ ...state.counterRedux }))(({ counter, dispatch }) => <CounterIndex counter={counter} dispatch={dispatch} />);
Action
export const COUNTER_ACTION = 'COUNTER_ACTION'; export const addActioner = ({counter}) => { return {type: COUNTER_ACTION, counter: counter + 1}; }; export const subActioner = ({counter}) => { return {type: COUNTER_ACTION, counter: counter - 1}; }; export const resetActioner = () => { return {type: COUNTER_ACTION, counter: 0}; };
Reducer
import { COUNTER_ACTION } from '../actions/CounterAction'; export default (state, action) => { switch (action.type) { case COUNTER_ACTION: return { ...state, counter: action.counter }; default: return state; } }
Store
import React from 'react'; import { Provider } from 'react-redux'; import { createStore } from 'redux'; import CounterReducer from '../reducers/CounterReducer'; let store = createStore(CounterReducer); export default ({ children }) => <Provider store={store}>{children}</Provider>
Redux 调试插件
console日志
安装redux-logger组件:
yarn add redux-logger --dev
。然后加入到redux store中即可:
import { createLogger } from 'redux-logger'; store = createStore(reducers, createLogger());
例如:
redux扩展程序
需要在Chrome应用市场安装Redux DevTools.
然后在store中使用增强功能将redux-logger加入即可:
const logger = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(createLogger()); store = createStore(reducers, logger);
推荐阅读《React 手稿》
相关推荐
opendigg 2020-06-02
weiqi 2020-04-29
mjzhang 2020-04-16
游走的豚鼠君 2020-11-10
81417707 2020-10-30
ctg 2020-10-14
小飞侠V 2020-09-25
PncLogon 2020-09-24
jipengx 2020-09-10
颤抖吧腿子 2020-09-04
wwzaqw 2020-09-04
maple00 2020-09-02
青蓝 2020-08-26
罗忠浩 2020-08-16
liduote 2020-08-13
不知道该写啥QAQ 2020-08-02
pengruiyu 2020-08-01
wmd看海 2020-07-27