React+Redux实现步骤以及完成一个简易的留言功能

为什么要用redux？

redux解决的是react组件之间通信以及项目的状态变量的保存问题。如果不使用redux，随着项目的越来越大，组件之间通信越来越复杂，组件的状态越来越多，项目将越来越难以维护。

如图绿点要和其他的几个组件相互通信的话，在react里面实现起来非常困难，你要不断地越过父组件和子组件。你知道的，在react中的通信得通过prop传递数据只能是一层一层传递。比如孙子组件需要更新父组件的state,就需要调用父组件的更新state方法。这样的情况下，父组件就得将更新函数作为prop传入到子组件，子组件再将prop中父组件传来的更新函数传递给孙子组件，这样层层调用。 但是这未免有些太繁琐，

使用redux之后，项目的状态都保存到store之中，各个组件可以直接从store之中获取到自己需要的状态，如果需要改变store中的状态，redux也提供了dispatch方法，组件可以dispatch一个action，根据action的type属性，reducer会对状态做出变化。
这样将全局状态保存到一处的做法，使得项目更加容易维护，组件之间的通信也更加容易实现和清晰。

具体实现步骤

1. 首先写出一个不含任何逻辑的页面：

包括一个input输入框、一个button按钮、一个ul列表

2. 准备两个redux的必须部件

reducer.js

//初始状态
const defaultState = {
    inputValue: '请输入内容',
    list: [1, 2]
}
export default (state = defaultState, action) => {
    return state;
}

Store.js

import { createStore } from 'redux';
import reducer from './reducer'

const Store = createStore(reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());//后面的参数是为了打开浏览器里面redux插件用的，便于调试。

export default Store;

3. 准备工作就绪，上图

这是主代码，代码通俗易懂

class App extends React.Component {

	constructor(props) {
		super(props)
		this.state = Store.getState();  //去Store中拿数据，拿的就是上面的reducer中返回的state
		Store.subscribe(this.storeChange)  //订阅Store，一但状态发生改变了就调用storeChange函数
	}

	inputChange=(e)=>{
		const action={   //创建一个action对象，如上图所示，用来传递我们想要对store中数据的修改动作
			type:'Change_input_value',   //什么动作呢？
			value:e.target.value     //要修改为什么？
		}
		Store.dispatch(action)     //如上图，Store.dispatch开始传递action给store，store自动传给reducer！！！
	}

	storeChange=()=>{
		this.setState(Store.getState())   //上面给subscribe写的回调函数，更新这个组件的state
	}

	clickButton=()=>{   //这里只是对button做出和上面一样的动作，同理
		const action={
			type:'Click_button',
			value:this.state.inputValue
		}
		Store.dispatch(action)
	}

	render() {
		return (
			<div>
				<input type='text'
					value={this.state.inputValue}
					onChange={this.inputChange}
				></input>
				<button
					onClick={this.clickButton}
				>确定</button>
				<ul>
					{this.state.list.map(
						(value, index) => {
							return <li key={index}>{value}</li>
						}
					)}
				</ul>
			</div>
		)
	}
}

export default App

修改后的reducer.js

const defaultState = {
    inputValue: '请输入内容',
    list: [1, 2]
}

export default (state = defaultState, action) => {
    if(action.type==='Change_input_value'){   //判断事件
        const newState=JSON.parse(JSON.stringify(state))   //深拷贝 记住：reducer可以接收state，但是绝不能直接修改state
        newState.inputValue=action.value // 改变赋值
        return newState  //返回新的state给store
    }
    if(action.type==='Click_button'){
      const newState=JSON.parse(JSON.stringify(state))
      newState.list.push(action.value)
      return newState
    }
    return state;
}

以上就是整体的步骤
欢迎指正错误