26.react-redux和redux的区别

redux使用回顾和核心

1.组件如何触发store中的state改变

createStore(reducer)

引入store

store.dispatch（action）方法

reducer根据不同action type 返回新的state部分

2.组件如何监听store的改变从而改变自身的props

组件通过store.subscribe(回调方法)方法监听store的改变

回调方法去store.getState()获取新的state内容从而修改自身的state

 

react-redux如何完成以上的两个功能

1.provider

import {Provider} from 'react-redux'

import store from './reducer/store'

//用到jsx语法时 必须导入react 包

const App = (

<Provider store ={store}>

<Todolist/>

</Provider>

)

ReactDOM.render(App, document.getElementById('root'));

2..connect

import React, { Component } from 'react';

import {connect } from 'react-redux'

 

class ToDoList extends Component {

render() {

return (

<div>

<input onChange={this.props.onchange} value={this.props.inputValue}/>

<button>提交</button>

<ul>

<li>hello</li>

</ul>

</div>

)

}

}

 

const mapStateToProps = (state) =>{

return {

inputValue:state.inputValue

}

}

const mapDispatchToProps = (dispatch) =>{

return {

onchange(e){

const action ={

type :"change_state",

inputValue:e.target.value

}

dispatch(action)

}

}

}

 

export default connect(mapStateToProps,mapDispatchToProps)(ToDoList)

 

3.reducer

export default (state=defaultState,action)=>{

switch(action.type){

case 'change_state' :

let state1 = JSON.parse(JSON.stringify(state));

state1.inputValue = action.inputValue;

return state1;

break;

default:

return state;

}

 

}