WindStormrage Blog
0%

二刷Redux笔记

发表于 更新于

关于react的一些思考

所有的数据全部先要发送给容器，然后容器负责接受数据单后再分发数据给他下面的组件，通过props来传递，一个页面就可以相当于一个容器，容器之中就会有很多子组件，一般组件只负责接受容器的数据的渲染，容器来处理组件的状态

开始redux

redux主要是三个部分组成

  • Action 在这里定义一些操作和操作需要的数据交流
  • Reducer 这里需要定义数据，也就是state然后要根据不同action做出不同的操作
  • Store 这个主要就是起到链接作用的

然后主要的数据流向是

在你的界面上发生事件然后传递到容器上，

容器负责链接上Action

然后Action把请求通过store找到reducers

在reducers上对数据进行处理

然后数据改变后reducers通过store找到绑定容器

在容器上对数据进行绑定

然后就可以在界面上显示出来了
image

Store

就一句话来链接容器和reducers

同时加上Provider组件

1
2
3
4
5
6
7
8
let store = createStore(testAPP);

ReactDOM.render((
	<Provider store={store}>
		<App/>
	</Provider>
	), document.getElementById('root'));
registerServiceWorker();

Action

类似于这种

每个action有一个type，然后后面是对应的交互的数据

1
2
3
4
5
6
export const addData = addDelta => {
	return {
		type: 'ADD_DATA',
		addDelta//添加量
	}
};

Reducer

在里面要定义state

然后写一个switch循环来判断不同的Action给出不同的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const initialState = {
	data : 0
}

const test = (state = initialState, action)=>{
	switch (action.type) {
		case 'ADD_DATA':
			console.log(state);
			return {
				data : state.data + action.addDelta
			}
		case 'SUBTRACT_DATA':
			return {
				data : state.data + action.addDelta
			}
		default:
			return state;
	}
};

export default test;

在容器中展示和触发

你在容器中使用redux的话需要绑定一下

1
export default connect(mapStateToProps,mapDispatchToProps)(Test)

mapStateToProps函数是绑定state里面的数据

mapDispatchToProps就是绑定一些方法方便触发

在组件中就直接通过props获取到

1
2
3
4
5
6
const mapStateToProps = state => ({
	data: state
})
const mapDispatchToProps = dispatch => ({
	test: id => dispatch(addData(id))
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Test2 extends Component {
	render() {
		const {data} = this.props;
		return (
			<div className="App">
				<p className="App-intro">
					<li><Link to='/test'>to test</Link></li>
					this is test2------<span>{JSON.stringify(data)}</span>
					<li><Link to='/'>to app</Link></li>
				</p>
			</div>
		)

	}
}