鍍金池/ 問答/HTML/ react項目使用redux,數(shù)據(jù)保存不到store?

react項目使用redux,數(shù)據(jù)保存不到store?

react項目使用redux,數(shù)據(jù)保存不到store?

index.js

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

actions


export const SET_USER = 'SET_USER'
export const LOGOUT = 'LOGOUT'

export function setuser(login) {
  return {type: SET_USER, login}
}
export function logout(user) {
  return {type: LOGOUT, user}
}

reducers

import { combineReducers } from 'redux'
import { SET_USER, LOGOUT } from '../actions'

function setuser(state = '1118', action) {
  switch(action.type) {
    case SET_USER:
      return action.login
    case LOGOUT:
      return ''
    default:
     return state
  }
}
const yg = combineReducers({
  setuser
})
export default yg

使用:

class page1 extends Component {
  componentDidMount() {
    this.props.dispatch(setuser('555'))
    console.log(this.props.login)
    console.log('111')
  }
  render() {
    return (
        <Content style={{ padding: '0 10px' }}>
          <Breadcrumb style={{ margin: '8px 0', position: 'relative' }} separator=">">
            <Breadcrumb.Item><Icon type="environment-o" />當前位置</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
            <div style={{ position: 'absolute', right: '0px', top: '-6px'}}>
              <div style={{ float: 'left', marginRight: '10px' }}>
                <Avatar style={{ backgroundColor: '#87d068', marginRight: '5px', marginTop: '1px' }} icon="user" />
                <Popover placement="bottom" title="用戶操作" content={content} trigger="click">
                  <Button type="dashed">user</Button>
                </Popover>
              </div>
              <div style={{ float: 'left', marginRight: '10px' }}>
                <Avatar style={{ backgroundColor: '#13c2c2', marginRight: '5px' }} icon="hdd" />
                <Button type="dashed">6+666</Button>
              </div>
              <div style={{ float: 'left' }}>
                <Avatar style={{ backgroundColor: '#2f54eb', marginRight: '5px' }} icon="calendar" />
                <Button type="dashed">year</Button>
              </div>
            </div>
          </Breadcrumb>
          <Layout style={{ padding: '24px 0', background: '#fff' }}>
            <Sider width={200} style={{ background: '#fff' }}>
              <Antdleftbar />
            </Sider>
            <Content style={{ padding: '0 24px', minHeight: 280, marginLeft: '50px' }}>
              <Antdtable />
            </Content>
          </Layout>
        </Content>
    )
  }
}
function select(state) {
  return {
    login: state.login
  }
}
export default connect(select)(page1)

輸出結(jié)果是:
undefined
111

以前的項目這樣用有效,半年沒用,現(xiàn)在就變成這樣了,不明白是怎么了
有些地方說為了解決React 0.13的問題
一定要用child用函數(shù)包起來
但是改
{ () => <Router /> }
會顯示

React.Children.only expected to receive a single React element child.
? 23 stack frames were collapsed.
./src/index.js
D:/software/workspace/bj_zbzq_ext/src/index.js:11
   8 | import yg from './reducers'
   9 | let store = createStore(yg)
  10 | 
> 11 | ReactDOM.render(
  12 |   <Provider store={store}>
  13 |     { () => <Router /> }
  14 |   </Provider>, document.getElementById('root'))

不明白這是為什么,希望大牛們幫忙看一下問題在哪

回答
編輯回答
真難過

store的創(chuàng)建代碼呢?有l(wèi)ogin?
const store = createStore(
reducer
)

2017年10月6日 17:25
編輯回答
久礙你

你store目錄結(jié)構(gòu)里并沒有l(wèi)ogin

2018年8月9日 20:32
編輯回答
懶洋洋

雖然dispatch是個同步的操作,但是由于連接器里使用了異步的setState,所以你不可能在dispatch后立馬拿到新的state。你可以在render里面把this.props.login打印出來就知道實際上是修改了的。

2017年9月30日 15:01