Redux 应用

全局应用redux 

1. 在src目录下新建两个文件，一个叫reducer.js,一个叫store.js

 store.js文件：

import { createStore } from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store

 reducer.js文件：

const defaultState = {//state
	inputValue: 'witer',
	list: []
}

export default (state = defaultState, action) => {//reducer
	return state
}

• 在index.js文件中去全局应用redux 

index.js文件： 

import React from 'react';
import { Provider } from 'react-redux'
import store from './redux/store';
import App from './App';

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

组件中读取redux

• 组件内引入连接器connect，组件导出connect包裹组件

import React from 'react'
import { connect } from 'react-redux'

class className extends React.Component{...}

export default connect()(className)

• 利用stateToProps把redux中的state映射成当前组件的props进行读取，读取方式和props一样 

import React from 'react'
import { connect } from 'react-redux'

class className extends React.Component{
	constructor(props){
		super(props)
	}
	render(){
		return <div>{this.props.inputValue}</div>
	}
}
const stateToProps = (state) => {
	return {
		inputValue:state.inputValue,
	}
}

export default connect(stateToProps,null)(className)

 

 注意：stateToProps只有映射出来的值才可用props的方式访问显示出来，没有做映射的不可以访问

修改redux中state的值

•  编写dispatchToProps函数，调用reducer来实现state的数据修改

className组件内写法： 

import React from 'react'
import { connect } from 'react-redux'

class className extends React.Component{
	constructor(props){
		super(props)
	}
	render(){
		return <div>
			<input placeholder="输入数据" onChange={this.props.inputChange}/>
			<div>{this.props.inputValue}</div>
		</div>
	}
}
const stateToProps = (state) => {
	return {
		inputValue:state.inputValue,
	}
}
const dispatchToProps = (dispatch) => {
	return {
		inputChange(e){
			let action = {
				type:'change_input',
				value:e.target.value
			}
			dispatch(action)
		}
	}
}
export default connect(stateToProps,dispatchToProps)(className)

 

 reducer.js文件内：

const defaultState = {
	inputValue: 'witer',
	list: []
}

export default (state = defaultState, action) => {
	if(action.type == 'change_input'){
		let newState = JSON.parse(JSON.stringify(state))
		newState.inputValue = action.value
		return newState
	}
	
	return state
}

注意：state的值需要深度拷贝一遍