React-redux入门

react-redux

以一个输入框为例，读取store中的值并修改。前提是有redux的基础（我之前写过），所以有些地方不复述了。

安装

npm install react-redux -S

入口index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import Text from './Text';
import * as serviceWorker from './serviceWorker';
import { Provider} from 'react-redux'
import store from './reactRedux/index'
const App = (
	// Provider组件，与stores数据关联，让Provider的内部组件都可以获取store里面的数据
	<Provider store={store}>
		<Text />
	</Provider>	
)
ReactDOM.render(App, document.getElementById('root'));
serviceWorker.unregister();

Text.js

import React, { Component } from 'react'
import {connect} from 'react-redux'
class Text extends Component {
  render() {
    return (
		<div>
			<div>
        		<input type="text" value={this.props.inputValue} onChange={this.props.inputChangeValue}/>
				<button>提交</button>
      		</div>
		</div>
      
    )
  }
}
// 赋值 state形参 取store
// state.inputValue映射到组件中props中，取值 this.props.inputValue
const mapStateToProps = (state)=>{
	return{
		inputValue:state.inputValue			
	}
}
// store.dispatch   方法挂在到props上 this.props.inputChangeValue
const mapDispatchToProps=(dispatch)=>{
	return{
		inputChangeValue(e){
			const action ={
				type:"change_inputValue",
				value:e.target.value
			}
			console.log(e.target.value);
			dispatch(action)
		}
	}
}
// connect 让组件和store连接 两个规则 1.数据的读取 2.数据改变 action
// 无需订阅
export default connect(mapStateToProps,mapDispatchToProps)(Text)

store设置文件

index.js

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

export default store

reducer.js

const defaultState = {
    inputValue:"hello world",
    list:[]
};
export default (state = defaultState,action)=>{
    if(action.type==='change_inputValue'){
        const newState=JSON.parse(JSON.stringify(state))
        newState.inputValue= action.value;
        return newState
    }

    return state
}

如有问题，欢迎留言