react结合redux实现tidolist小demo

 主要是通过一个小的demo来体现redux的实现机制

首先在你的项目src目录下新建一个store的文件夹

在这个文件夹里面新建一个index.js文件

第一步：npm或者yarn下载redux

第二步:在index文件里面引入

import {createStore} from 'redux'

const strore =createStore()

export default store;

第二步：新建一个reducer.js文件这个文件里面主要是放一些数据和处理数据的具体逻辑代码

const defaultState={

}

export defalut (state=defalutState,action)=>{

return state

}

具体如何获取reduce里面的数据并且改变它呢

首先在你需要使用到redux里面数据的页面里面引入

import store from './store/index.js'

完了之后·在组件的constructor(props) {

super(props)

this.state=store.getState//这句代码的意思是将页面的state来接受store里面的数据

}

代码写到这就可以接受到来自store里面的数据

这是redux大概的创建原理

具体是如何使用的呢

<Input placeholder="写下你的todolist" value={this.state.inputValue} style={{width:'350px', marginRight:'10px'}}

onChange={this.handleChangeInput}

/>

一个是将输入框的值绑定到store里面，一个是监听输入框的数据的变化 通过一个函数

handleChangeInput(e){

const action={

type:"input_change",

value:e.target.value

}

store.dispatch(action)

}

第三步

 

reducer.js

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

if(action.type==='input_change'){

const newState = JSON.parse(JSON.stringify(state))

newState.inputValue=action.value

return newState

}

return state

}

 最后实现一个todolist demo代码如下

index.js

 

import {createStore} from 'redux'

import reducer from './reducer'

const store =createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

export default store;

 

reducer.js

 

const defaultStatus={
  inputValue:'12',
  list:[1,3,2,32]
}

export default (state=defaultStatus,action)=>{
    if(action.type==='input_change'){
      const newState = JSON.parse(JSON.stringify(state))
      newState.inputValue=action.value  
      return newState
      }
      if(action.type==='submit_list'){
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue=''
        return newState
      }
   return state
  }

　　App.js

import React ,{ Component } from 'react';
import { Input, Button,List} from 'antd';
import store from './store/index.js'
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
// const data = [
//   'Racing car sprays burning fuel into crowd.',
//   'Japanese princess to wed commoner.',
//   'Australian walks 100km after outback crash.',
//   'Man charged over missing wedding girl.',
//   'Los Angeles battles huge wildfires.',
// ];
class App extends Component{
  constructor(props){
    super(props)
    this.state=store.getState()
    this.handleChangeInput=this.handleChangeInput.bind(this)
    this.handleSoreChange=this.handleSoreChange.bind(this)
    this.submit=this.submit.bind(this)
    store.subscribe(this.handleSoreChange)
    console.log(this.state)
  }
  render(){
    return (
      <div className="App" style={{marginLeft:'10px',marginTop:'10px'}}>
        <Input placeholder="写下你的todolist" value={this.state.inputValue} style={{width:'350px', marginRight:'10px'}}
        onChange={this.handleChangeInput}
        /> 
        <Button type="primary" onClick={this.submit}>提交</Button>
        <List
        style={{marginTop:'10px',width:"350px"}}
          bordered
          dataSource={this.state.list}
          renderItem={item => (
          <List.Item>
            {item}
          </List.Item>
          )}
        />
      </div>
    );
  }
  handleChangeInput(e){
    const action={
      type:"input_change",
      value:e.target.value
    }
    store.dispatch(action)
  }
  handleSoreChange(){
    this.setState(store.getState())
  }
  submit(){
    const action ={
      type:'submit_list',
    }
    store.dispatch(action)
  }
  
}
export default App;

　　

 

---

 

转载于:https://www.cnblogs.com/bbldhf/p/11250242.html