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