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;
}