一、redux使用
Redux的核心概念其实很简单：将需要修改的state都存入到store里，发起一个action用来描述发生了什么，用reducers描述action如何改变state tree 。创建store的时候需要传入reducer，真正能改变store中数据的是store.dispatch API。
1、src下新建store文件夹,新建index.js作为store的输出文件
2、store文件夹下新建index.js文件
3、新建reducer.js ,actionTypes.js文件
4、组件引入store
import React, { Component } from 'react';import { Input ,Button,List } from 'antd';import store from './store';import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM} from './store/actionTypes'class TodoList extends Component { constructor(props) { super(props); this.state = store.getState(); this.handleStoreChange = this.handleStoreChange.bind(this); this.handleBtnClick = this.handleBtnClick.bind(this); this.handleInputChange = this.handleInputChange.bind(this); store.subscribe(this.handleStoreChange) } handleInputChange(e) { const action = { type: CHANGE_INPUT_VALUE, value: e.target.value } store.dispatch(action) } handleBtnClick() { const action = { type: ADD_TODO_ITEM } store.dispatch(action) } render() { return ( {item} } />
) } handleStoreChange() { this.setState(store.getState()) } handleItemDelete(index) { const action = { type: DELETE_TODO_ITEM, index } store.dispatch(action) }}export default TodoList; 5、使用redux-devtool
import { createStore } from 'redux';import reducer from './reducer'const store = createStore( reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());export default store; 6、actionTypes.js代码如下
export const CHANGE_INPUT_VALUE = 'change_input_value';export const ADD_TODO_ITEM = 'add_todo_item';export const DELETE_TODO_ITEM = 'delete_todo_item';
7、reducer.js代码如下
import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM} from './actionTypes'const defaultState = { inputValue:'aaa', list:['1','2']}export default (state = defaultState,action) => { if(action.type === CHANGE_INPUT_VALUE) { const newState = JSON.parse(JSON.stringify(state)); newState.inputValue = action.value; return newState; } if(action.type === ADD_TODO_ITEM) { const newState = JSON.parse(JSON.stringify(state)); newState.list.push(newState.inputValue); newState.inputValue = ''; return newState; } if(action.type === DELETE_TODO_ITEM) { const newState = JSON.parse(JSON.stringify(state)); newState.list.splice(action.index,1); return newState; } return state;} 8、优化：使用actionCreactor.js来统一管理action
二、引入react-redux
1.在index.js里引入react-redux及store
import React from 'react';import ReactDOM from 'react-dom';import 'antd/dist/antd.css';import './index.css';import App from './TodoList';import * as serviceWorker from './serviceWorker';import store from './store'import { Provider } from 'react-redux';const ProviderApp = ( )ReactDOM.render(ProviderApp, document.getElementById('root'));serviceWorker.unregister(); 2.在组件里做connect
import React, { Component } from 'react';import { Input ,Button,List } from 'antd';import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM} from './store/actionTypes'import {connect} from 'react-redux';class TodoList extends Component { render() { const {handleInputChange,handleBtnClick} = this.props return ( {item} } />
) } }const mapStateToProps = (state) => { return { inputValue: state.inputValue, list : state.list } }const mapDispatchToProps = (dispatch) => { return { handleInputChange(e) { const action = { type: CHANGE_INPUT_VALUE, value: e.target.value } dispatch(action) }, handleBtnClick() { const action = { type: ADD_TODO_ITEM } dispatch(action) }, }}export default connect(mapStateToProps,mapDispatchToProps)(TodoList); 三、redux-thunk使用
1.中间件的概念
dispatch一个action之后，到达reducer之前，进行一些额外的操作，就需要用到middleware。你可以利用 Redux middleware 来进行日志记录、创建崩溃报告、调用异步接口或者路由等等。
换言之，中间件都是对store.dispatch()的增强。redux-thunk就是用来异步操作，比如接口请求等。2.引入redux-thunk
import { applyMiddleware, createStore } from 'redux';import thunk from 'redux-thunk'; const store = createStore( reducers, applyMiddleware(thunk)); 3.这样就可以再actionCreactor中创建一个带异步函数的方法了
export const getTodoList = () => { return () => { axios.get('./list').then((res)=>{ const data = res.data; const action = initListAction(data); StorageEvent.dispatch(action); }) }}
四、redux-saga使用
redux-saga是一个用于管理redux应用异步操作的中间件，redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理，可以用来代替redux-thunk中间件。
1.在store.js里引入redux-saga
import { createStore, applyMiddleware } from 'redux'import createSagaMiddleware from 'redux-saga'import reducer from './reducers'import mySaga from './sagas'// create the saga middlewareconst sagaMiddleware = createSagaMiddleware()// mount it on the Storeconst store = createStore( reducer, applyMiddleware(sagaMiddleware))// then run the sagasagaMiddleware.run(mySaga)；export default store; 2.新建 saga.js
import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'import Api from '...'// worker Saga: will be fired on USER_FETCH_REQUESTED actionsfunction* fetchUser(action) { try { const user = yield call(Api.fetchUser, action.payload.userId); yield put({type: "USER_FETCH_SUCCEEDED", user: user}); } catch (e) { yield put({type: "USER_FETCH_FAILED", message: e.message}); }}function* mySaga() { yield takeEvery("USER_FETCH_REQUESTED", fetchUser);}export default mySaga; 五、dva对比
dva使用可以参考这个博客：