react-redux实践

React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据

安装 在你的React app中使用React-Redux：

yarn add react-redux

Provider和connect React-Redux 提供组件，能够使你的整个app访问到Redux store中的数据：

import React from 'react'; import ReactDOM from 'react-dom'; import TodoList from './TodoList'; import { Provider } from 'react-redux'; import store from './store'; const App = ( <Provider store={store}> <TodoList /> </Provider> ) ReactDOM.render(App, document.getElementById('root'));

React-Redux提供一个connect方法能够让你把组件和store连接起来。 通常你可以以下面这种方式调用connect方法：

import React from 'react'; import { connect } from 'react-redux'; const TodoList = (props) => { const { inputValue ,list, changeInputValue, handleClick ,handleDeleteItemClick} = props; return ( <div> <div> <input value={inputValue} onChange={changeInputValue} /> <button onClick={handleClick}>提交</button> </div> <ul> { list.map( (item,index) => { return <li onClick={ () => { handleDeleteItemClick(index)} } key={index}>{item}</li> }) } </ul> </div> ) } const mapStateToProps = (state) => { return { inputValue:state.inputValue, list:state.list } } const mapDispatchToProps = (dispatch) => { return { changeInputValue (e) { const action = { type: 'change_input_value', value: e.target.value } dispatch(action); }, handleClick() { const action = { type: 'add_item' } dispatch(action); }, handleDeleteItemClick(index) { const action = { type: 'delete_item', index } dispatch(action); } } } export default connect(mapStateToProps,mapDispatchToProps)(TodoList);

reducer接收到事件后处理

const defaultState = { inputValue: '', list: [] } 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_item') { const newState = JSON.parse(JSON.stringify(state)); newState.list.push(newState.inputValue); newState.inputValue = ''; return newState; } if (action.type === 'delete_item') { console.log(action); const newState = JSON.parse(JSON.stringify(state)); newState.list.splice(action.index); return newState; } return state; }

源代码：https://github.com/fanxiao168/react-redux